How To Change The CSS Of One Image When Hovering Another Image?

So I'm tyring to fade one image in and the other out when hovered using html/css. These images sit on top of each other. One is a transparent play button (which has to be on top?)

Solution 1:

I suggest tweaking what you have.

HTML:

<div id="container">
   <img src="play.jpg" alt="Play Image" class="play" />
   <img src="picture.jpg" alt="Picture Image" class="picture" />
</div>

CSS:

#container {
   width: 200px;
   height: 200px;
   position: relative;
}

#container IMG {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transition: all 3s ease;
   -moz-transition: all 3s ease;
   -ms-transition: all 3s ease;
   -o-transition: all 3s ease;
   transition: all 3s ease;
}

#container IMG.play {
   opacity: 1;
}

#container IMG.picture {
   opacity: 0;
}

#container:hover IMG.play {
   opacity: 0;
}

#container:hover IMG.picture {
   opacity: 1;
}

When you hover over the container, one of the images fades in and the other fades out. You should be able to wrap anything in anchors if you need to.

Solution 2:

Do not apply the .hover effect on your <img class="playButton"> but on the <a> tag that surronds it. Your img is not seen like an image but like a link (because it is IN the <a> tag and it is like hidden by it). You should always take the more external selector.