oXGhostyXo
New Member
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?) And the other is a picture. When hovered, I want the play button to fade in and the picture to fade out.I have done countless research and here is what I currently have:\[code\]<div id="videocontainer"> <a href="http://stackoverflow.com/questions/15891633/#"><img class="playButton" onclick="do something" src="http://stackoverflow.com/questions/15891633/imagesrc" alt="" /></a> <img class = "vidImage" src="http://stackoverflow.com/questions/15891633/imagesrc" alt=""/></div>\[/code\]And here is my css\[code\] #videocontainer { position: relative; width: 760px; height:400px; } .playButton { z-index: 500; position: absolute; top: 0; left: 0; width:760px; height:400px; } .vidImage { position: relative; top: 0; left: 0; } .playButton:hover ~ .vidImage { -webkit-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease } .playButton:hover { -webkit-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; }\[/code\]This should fade both the image and the play button when the play button is hovered. But it is only fading out the play button and nothing is happening to the vidimage. Is it possible that because the transparent play button is a little bigger than the video image, that its not affecting it at all because its covering it? Most of my research tells me to use ~ or + in my CSS but none have worked for me. Thanks for the help.Here is a link to what I currently am working with: http://webdesignog.com