How to fade an image when you hover over the div it's in?

Question

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;
}

Answer 1

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;
}

Answer 2

如果image.jpg是常规图像，并且faded.jpg包含photoshop的image.jpg的褪色版本，则下面的代码将起作用。

<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">

Answer 3

You can do this one of two ways.

1. 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.
2. 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

Answer 4

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