I have an image which I've faded out using opacity css. The opacity of the image returns to 1 when hovered.
However, in Firefox, it appears to "jump" a little when hovered over. It seems to be something to do with the way Firefox smooths the image while faded - is there a way around this?
Here's a fiddle:
http://jsfiddle.net/jngS8/5/
<div class="container">
<a class="opacity">
<img src="http://imgur.com/EhiSptf.png" />
</a>
</div>
CSS:
img {
height: auto;
max-width: 100%;
}
.container{
width:200px;
}
.opacity {
opacity: 0.6;
}
.opacity:hover {
opacity:1;
}
Set
-moz-backface-visibility: hidden;
on the image.
Source: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/.
That article is talking about CSS transitions, but looks like it works without transitons, too.
http://jsfiddle.net/jngS8/6/
Related
Ok I tried to set the text in a span and when the div (consisting of the image and the text in it) was scrolled over it would set the span opacity to 0. It is not working though, and here is my code.
HTML
<div id="phild">
<td class="bio"> <img class="bio" src="phil.jpg" />
<span id="phils"><h2 id="philh">Phil</h2></span>
</td>
</div>
CSS to make the image opacity:1 when hovered
div#phild :hover{
opacity: 1;
transition: all .2s linear;
}
CSS to make the text opacity:0 when the entire thing (image and text) is hovered over
div#phild:hover span#phils{
opacity:0;
}
If the text is on top of the image, you can't use img:hover for your desired effect because when your cursor is on the text, it doesn't register as hovering the image. You could put the image and text inside something, and then have the text disappear when the parent is hovered
.bio {
position:relative;
float:left;
}
.bio img {
display:block;
}
.bio span {
position:absolute;
bottom:0;
left:0;
transition: all .2s linear;
}
.bio:hover span {
opacity:0;
}
<div class="bio">
<img src="http://placehold.it/100x100" />
<span>Text</span>
</div>
So long as youselectors are correct, the following should work all the way back to IE 6:
img.bio:hover{
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
There a number of ways to do this. Assuming your text follows your img element, you can use the hover pseudo-class and adjacent sibling selector to target the text and apply your CSS.
div {
position: relative;
display: inline-block;
}
.bio {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
img:hover + .bio {
opacity: 0;
}
<div>
<img src="http://placehold.it/200x200" />
<span class="bio">Text Here</span>
</div>
I am trying to add a colorful transparent overlay when you hover over an image (any color: purple, blue, red, orange would be great), but instead I am getting a white transparent overlay. Please note, I am using bootstrap grid so that my images stay responsive. I've tried everything I can think of... adding a background-color: blue with some opacity, but I am stuck. White overlay looks okay, but I wanted to have some fun with the color. Please see my code below and tell me what I need to do. Many thanks!
<div class="container">
<div class="row">
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers4.jpg" class="img-responsive">
</a>
</div>
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers5.jpg" class="img-responsive">
</a>
</div>
</div> <!-- closes div row -->
</div> <!-- closes div container -->
CSS code:
.hover12 img {
background-color: blue;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 img:hover{
opacity: .5;
}
opacity fades out the entire element including its background, it does not make the contents transparent and the background show through. What you would want to do instead is either put an element with your color (blue perhaps) underneath the image and make the image opaque (with opacity), or hide and show an element on top of the image that has some transparency.
Here is an example. On hover, the image becomes 50% opaque and you can see the blue element under it showing through.
.img-container {
background-color: blue;
display: inline-block;
line-height: 0;
}
.img-container img:hover {
opacity: .5;
}
<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>
Edit:
I just looked at your code again and realized you basically have it right, except you have the background color set on the img element, but it should be set on the element that contains the img, which is the .thumbnail class, so try just adding:
.thumbnail {
background-color: blue;
}
This is probably best accomplished using a pseudoelement that overlays the image. Here is how to create a pseudoelement that overlays an image and has reduced opacity when the image is rolled over:
#theimg {
position: relative;
display: inline-block;
}
#theimg::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
opacity: 1;
}
#theimg:hover::after {
opacity: .5;
}
<div id="theimg">
<img src="https://i.imgur.com/LDR6AWn.png?1" />
</div>
Easiest way is to use :before to make a semi-transparent overlay:
img:hover:before {
content: '';
position:absolute;
top:0;left:0;bottom:0;right:0;
background:rgba(0,0,255,0.3);
}
Downside is that it will block the image being clickable, and may be an issue when you are using images with CSS background instead of the <img /> in HTML.
Another way, if Internet Explorer support isn't an issue (which could be the case if this effect is just for show), you could play around with the CSS filter. It's not as easy as overlaying a transparent image over the image, but you can get some very nice effects:
img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); }
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); }
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); }
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); }
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); }
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); }
For your question, I would recommend using .hue-rotate and maybe add a CSS transition. Note: you can combine effects!
Play around with sliders:
http://www.cssreflex.com/css-generators/filter/ or http://html5-demos.appspot.com/static/css/filters/index.html
In the code below, there is an opacity transition which allows one image to fade out and reveal the one behind it. Overlaying both of these images is a logo image which is intended to remain in full view the full time of the transition, yet it does flicker out as the transition plays. (tested on chrome and firefox - seen on both)
How can i keep the logo constantly on top and in full opacity, while still having the underlying image fade work?
Please see the jsfiddle link at the bottom for a working example.
The HTML
<div>
<img id="bloomtop"
src="http://dev.kaizenauto.co/images/colorbloom.jpg">
<img id="bloombottom"
src="http://dev.kaizenauto.co/images/greybloom.jpg">
<img class="img-responsive z99"
src="http://dev.kaizenauto.co/images/drivenow.png">
</div>
The CSS
.z99 {
z-index:99;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
All this in action in a fiddle: http://jsfiddle.net/ax3dwbyo/2/
Thanks.
Simply add position: relative to your .z99 div, like this:
.z99 {
position: relative;
}
Here's a working demo:
.z99 {
z-index:99;
position:relative;
}
#bloomtop,
#bloombottom {
width:100%;
height:290px;
margin-bottom:-290px;
display:block;
transition: opacity .7s ease-in-out;
z-index:1;
}
#bloombottom:hover {
opacity:0;
}
<div>
<img src="http://dev.kaizenauto.co/images/colorbloom.jpg" id="bloomtop">
<img src="http://dev.kaizenauto.co/images/greybloom.jpg" id="bloombottom">
<img src="http://dev.kaizenauto.co/images/drivenow.png" class="img-responsive z99">
</div>
jsFiddle.
I have a large div with a small image inside of it. I want to make the image fade when I hover over the div, even when the mouse isn't directly over the image itself.
The div is much bigger than the image, so I'm not going to add transparency around the image or change the image size or anything like that.
I just want it to fade when the mouse hovers over the div it's in.
Here's the code I have so far, but it won't be useful:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
CSS
#left {
background-color: #f0f0ee;
float: left;
width: 50%;
min-height: 100%;
}
#logoLeft {
float: right;
margin-top: 2.5em;
}
I'd suggest:
#left:hover #logoLeft {
opacity: 0.4;
}
If you'd like a gradual fading:
#logoLeft {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
#left:hover #logoLeft {
opacity: 0.4;
transition: opacity 0.3s ease-in-out;
}
The below code would work if image.jpg is the regular image and faded.jpg contains a faded version of image.jpg that you photoshop.
<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">
You can do this one of two ways.
Use the general child selector: #left:hover #logoLeft which just says anything that is a child of #left:hover with an id of #left should have these rules applied.
User the direct descendant selector #left:hover > #logoLeft which says that any immediate child of #left:hover with id #left should have these rules applied.
Here is a more detailed description from Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
Also, the :hover sudo selector is what you would use for the mouse over property. MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
NOTE: Some older (outdated) versions of Internet Explorer only support the :hover sudo selector on anchor tags.
For the fading I'm guessing you just want to change the opacity of the image. To have full cross browser support I would recommend this page: http://css-tricks.com/snippets/css/cross-browser-opacity/
Which says the following:
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Here is a working jsfiddle
Here is the Jquery Solution of this :
Css Part :
#left{
background-color: #f0f0ee;
float: left;
border:1px solid black;
width: 50%;
min-height: 100%;
}
#logoLeft {
float:right;
}
.fadeOut{
opacity:0;
transition: opacity 1s ease-in-out;
}
Js Part :
<script type="text/javascript">
$(document).ready(function(){
$("#left").on({
"mouseover" : function() {
$("#logoLeft").addClass("fadeOut");
},
"mouseout" : function() {
$("#logoLeft").removeClass("fadeOut");
}
});
});
</script>
HtML part:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
Here is the working example : http://jsbin.com/tijobudo/1/edit
Heres where I'm at:
http://codepen.io/qdarkness/pen/FyIJh
Ideally, how I imagine it at least, is when a user hovers over the <a> that the <div>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.
I'm suspecting the fact that I have the <img> inside the <div> that it is not working properly, but I am using that div to constrain the img width and height.
I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <div>?
HTML:
<li class="b c d">
<a href="" class="link">
<div class="img-holder overlay"><img src="img/test.jpg"></div>
<div class="tag overlay">
<h3>test</h3>
<h4>test</h4>
</div>
</a>
</li>
CSS:
.img-holder {
width: 235px;
height: 195px;
overflow: hidden;
}
.tag {
clear:both;
position:relative;
float:left;
width: 100%;
overflow:hidden;
background-color: #FFF;
text-align: center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
a:hover .overlay {
background: #909090;
z-index: 301;
}
OK, I THINK I have an understanding of what you want to do...
I've forked your Codepen sketch: http://cdpn.io/uzfrk
Main points are to position the overlay absolute over your image (relative to .link), and then transition opacity to have it appear.
<old example removed>
UPDATED: fresh sketch with cleaned up markup and styling. Simple example for your purposes.
Codepen sketch here: http://cdpn.io/zhBcA
The main point is the direct child selector to target elements related to your container.
figure:hover > figcaption {
background: #ccc;
}
figure:hover > .overlay {
opacity: 0.85;
}
Let me know if this is what you are looking for.
Could this be what you want? It's just a simple approach.
UPDATE:
Covering text area now.
http://codepen.io/anon/pen/tlKCJ