go01go01go go01go01go - 3 months ago 25
CSS Question

One image to another, on hover (No transparent)

I need to do One image change on hover to another .
i use this code:

<div id="cf">
<img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
<img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>


#cf {
position:relative;
height:200px;
width:118px;
margin:0 auto;
}

#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
opacity:0;
}


I have problem that, i can see hover image (bottom), because top image is transparent. i need that hover image (bottom) only was seen when i hover it

Source of code: http://css3.bradshawenterprises.com/cfimg/

Answer

You could move the :hover state to #cf like so:

#cf {
  position:relative;
  height:200px;
  width:118px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.bottom {
  opacity: 0;
}

#cf:hover img.top {
  opacity:0;
}

#cf:hover img.bottom{
  opacity: 1;
}
<div id="cf">
  <img class="bottom" src="https://s4.postimg.io/pv7t833bx/image.png" />
  <img class="top" src="https://s3.postimg.io/zbzl74tsv/image.png" />
</div>