Hi i am aware that you can add a greyscale filter on an image, but would it be possible for a white overlay using the filter setting. I have to do it through css without the need for another div, to be absolute positioned over the image, with a white background and opacity setting changed. Just a simple image within a a tag:
<a href="#">
<img src="http://placehold.it/300x200" />
</a>
css is basic
a img{
display:block;
max-width:100%;
height:auto
}
Solution 1:
You may use the :after psuedo-element. For example, add a class of white-out to your <a> element, and then use the following CSS:
a.white-out {
position: relative;
display: inline-block;
}
a.white-out:after {
position: absolute;
content: '';
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,.5);
}
jsFiddle Demo
Solution 2:
Alternatively, you can try setting a white background on your <a> element, and reducing the opacity of the <img /> inside. For example:
a.white-out {
display: inline-block;
background: #fff;
}
a.white-out img {
opacity: 0.2;
}
jsFiddle Demo
Related
I need to place NON-transparent text on an image. This image is defined in the html. (This is so it can be dynamic). I style the transparency with an :after pseudo element. I would like to have text on this image. apprecaited
However, the problem I'm running into is that the text inherits the transparency. All of the other solutions I have found either define the picture in CSS or don't use a picture at all. Any help would be appreciated, thanks!
EDIT: A colored transparency is desired.
<div class="col-md-6" id="red-square-parent">
<%= image_tag 'infos/home/teaching-3.jpg' %>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
#red-square-parent img{
height: 100%;
width: 100%;
object-fit: none;
}
// Overlay
#red-square-parent:after{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba($comp-color-red, 0.7);
}
So, the issue is that you're applying transparency to the parent element. Just target the image specifically for transparency:
JSFiddle
#red-square-parent img{
position: relative;
opacity: 0.5;
}
#red-square-parent div{
position: absolute;
bottom: 40px;
color: black;
font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
<img src="http://i.imgur.com/eTmzQ.jpg"/>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
In order to apply a coloured filter over this image, you will not be applying background-color as this will not change the color of the image at all.
What you instead need to do it a bit complicated, but you must apply a filter to the image.
I would recommend using a tool such as this: CSS Generator - Filter to get the desired color effect you want.
When you have the desired filter, update your code to look something like this (using the code generated from the CSS Generator - Filter site. See my JSFiddle
#red-square-parent img{
position: relative;
opacity: 0.5;
/* Filter */
filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
-webkit-filter: grayscale(50%) opacity(1) brightness(100%) contrast(100%) hue-rotate(500deg);
}
#red-square-parent div{
position: absolute;
bottom: 40px;
color: black;
font-size: 50px;
}
<div class="col-md-6" id="red-square-parent">
<img src="http://i.imgur.com/eTmzQ.jpg"/>
<div class="centered">Don't Apply Transparency to me!</div>
</div>
So what I want is that when an image is hovered over the black overlay I have added with the :before covers the div and then I will add text and an image over the top of that later. With the current code it doesn't even seem to be recognising the hover. I'm also using foundation. Help would be much appreciated :)
<div class="small-12 large-4 columns">
<img class="tri" src="media/images/mountain.jpg">
</div>
.tri{
position: relative;
overflow: hidden;
display: block;
}
.tri:before{
opacity: 0.8%;
top: 100%;
width: 100%;
height: 100%;
transition: all 0.4s;
background-color: black;
position: absolute;
content: '';
}
.tri:hover::before{
top: 0%;
}
Unfortunately, ::before and ::after psuedoclasses aren't supported on self-closing elements like img and input.
You could simply wrap an additional div around the img and put the :hover and ::before properties on that.
I'm trying to center a font awesome icon over an image when the mouse is hovering the image.
Here's my HTML:
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<i class="fa fa-upload fa-5x"></i>
</div>
And my CSS:
.profile-img-container {
position: relative;
}
.profile-img-container img:hover {
opacity: 0.5;
}
.profile-img-container img:hover + i {
display: block;
z-index: 500;
}
.profile-img-container i {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
However the font awesome icon is somewhy displayed all the way to the left and the icon keeps flickering when I hover the image.
Here's my JSFiddle:
http://jsfiddle.net/fns8byfj/1/
The usage here is important to consider. This is a trigger, so I would use a link inside here. I would not display:none since IOS will not work on the actions inside this when the state on the selector was display:none or visibility:hidden even if the :hover changes this state. Use opacity and position to "hide it".
VERY IMPORTANT:
A parent is not the size of the child image inside it unless that div is the child of something that constrains its width or the div is floated or inline-block. If you put this in a column inside the grid and the image is, at any viewport width, as wide as that column, then you can remove the "inline-block" on the .profile-img-container however if you use it just stand alone you have to float it or put an .inline-block on it but then you have to change the responsiveness of the image if the parent is an inline-block max-width:100% doesn't work (just like it doesn't work if inside a table-cell).
:hover is not a good idea, I would use jQuery to make this a click by toggling the parent's class.
DEMO: http://jsfiddle.net/prtkqb44/
CSS:
.profile-img-container {
position: relative;
display: inline-block; /* added */
overflow: hidden; /* added */
}
.profile-img-container img {width:100%;} /* remove if using in grid system */
.profile-img-container img:hover {
opacity: 0.5
}
.profile-img-container:hover a {
opacity: 1; /* added */
top: 0; /* added */
z-index: 500;
}
/* added */
.profile-img-container:hover a span {
top: 50%;
position: absolute;
left: 0;
right: 0;
transform: translateY(-50%);
}
/* added */
.profile-img-container a {
display: block;
position: absolute;
top: -100%;
opacity: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
color: inherit;
}
HTML:
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<span class="fa fa-upload fa-5x"></span>
</div>
You can center it both horizontally and vertically using percentage widths, but this implies that you know approximately the width in percentages of the element you are trying to position, in this case the font-awesome one. Note that I aligned it approximately, positioning it to the left and top by 45%.
I've updated your code with the above-mentioned part, and by also applying the hover effect on the containing DIV such that the font-awesome icon does not flicker. It flickered because when you were hovering over it, the hover over the image was being lost.
The HTML remains, the same, only the style differs:
.profile-img-container {
position: relative;
}
.profile-img-container i {
position: absolute;
top: 45%;
left: 45%;
transform: translate(-45%, -45%);
display: none;
}
.profile-img-container:hover img {
opacity: 0.5;
}
.profile-img-container:hover i {
display: block;
z-index: 500;
}
Your updated JSFiddle.
The following solution should work, as long as you can afford to have fixed widths in the topmost container (in the example, 300px) or otherwise manage to have a line-height value which is always equal to the rendered height of the image.
The solution exploits the line-height and text-align properties to achieve vertical and horizontal positioning, respectively.
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<div class="profile-img-i-container">
<i class="fa fa-upload fa-5x"></i>
</div>
</div>
.profile-img-container {
height: 300px;
width: 300px;
line-height: 300px;
position:relative;
}
.profile-img-container:hover img {
opacity: 0.5;
}
.profile-img-container:not(:hover) .profile-img-i-container {
display: none;
}
.profile-img-i-container {
position: absolute;
top: 0px;
left: 0px;
display: block;
height: 100%;
width: 100%;
z-index: 500;
text-align:center;
}
.profile-img-i-container i {
display:block;
line-height: inherit;
}
Fiddle
About the flickering:
Be careful with :hover. In your example you had the following snippet:
.profile-img-container img:hover + i {
display: block;
...
}
This causes the i element to appear when you hover the image. Then the i element is placed on top of the image, so you're not longer hovering the image, but the i element. The icon hides again, and you are again hovering the image. This is what caused the flickering effect. The solution is to work with the :hover property of the topmost element.
.profile-img-container:hover img + i {
display: block;
...
}
I have changed the position of .profile-img-container to absolute and set it's width to 50% (you can adjust the width to change the image size).
.profile-img-container {
position: absolute;
width:50%;
}
because of the flickering effect, you must set your img z-index higher than the z-index of i.
.profile-img-container img:hover {
opacity: 0.5;
z-index: 501;
}
.profile-img-container img:hover + i {
display: block;
z-index: 500;
}
I have changed the position of i to absolute and centered it using margin-left and margin-top
.profile-img-container i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}
And finally I changed the position of img to absolute
.profile-img-container img {
position:absolute;
}
Try this code: http://jsfiddle.net/fns8byfj/16/
On the image above the triangle is outer block, and the main block have 'overflow: hidden'. During the animation part of the animated image is cropped. In the main block necessary boundaries of complex shape. Any ideas how is this possible? Requirement of browsers - top versions chrome or firefox.
example: http://jsfiddle.net/F7Cz9/
This one is a little complex and I don't have all the styling down yet but by using pseudo-elements on a wrapper to create the triangle above...you can do it.
The hover is there just to show the "overflow" working.
Codepen.io Demo
HTML
<div class="super-wrap">
<div class="imgwrapper">
<img src="http://lorempixel.com/output/city-q-c-350-100-8.jpg" alt="" />
</div>
</div>
CSS
.super-wrap {
width:700px;
margin: 50px auto 0;
padding-top: 50px;
border:1px solid grey;
}
.imgwrapper {
width:700px;
position: relative;
}
.imgwrapper img {
display: block;
margin-left: 0;
transition:margin-left 1s ease;
}
.super-wrap:hover img {
display: block;
margin-left: 50%;
}
I have a few pictures in a table that they work as a link and in hover a play button should appear over them.
I tried many different tricks but they all have problems which dont work properly. I decieded to share my question here to find an standard solution.
Here is what I have done so far:
img{
position: relative;
}
img:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
min-height: 100px;
position: absolute;
left: 0;
}
I dont know if I am in the right direction or not, but have a look at the demo http://jsfiddle.net/jmXdh/8/ and if it is wrong then please let me know any other way.
You unfortunately can't use the ::before and ::after pseudo-elements with replaced elements. The content of all replaced elements is outside the scope of CSS.
From the Generated and Replaced Content Module (WD):
Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.
Here's something that might work, assuming you can add additional markup:
http://jsfiddle.net/isherwood/jmXdh/11/
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://placehold.it/80x80) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -50px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
<b>Video test</b>
</a>
Or with a transition effect:
http://jsfiddle.net/isherwood/jmXdh/12/
.play {
opacity: 0;
transition: opacity 0.3s;
}
a:hover .play {
opacity: 0.7;
}