Superponer una imagen encima de otra al pasar mouse

[hackstronger]

Necesito hacer que una imagen se superponga encima de otra al pasar el mouse, pero sin que la de debajo desaparesca.

Como se muestra en esta pagina http://www.sipeliculas.com. Que al pasar el mouse encima aparece la imagen de play es exactamente lo que quiero. Pero por mas que le hago no he podido.

Gracias de antemano si alguien sabe.

[AngelKrak]

no es algo tan dificil amigo ;) ahi te dejo el codigo y la demo ;)

Código HTML:

<li class="li">
  <a class="link" href="#">
    <i></i>
    <img src="http://img.sipeliculas.com/img-mediano/deep-web-559ada7d98826.jpg" alt="Deep Web">
  </a>
</li>
 

Código CSS:

.li {
  position: relative;
  display: inline-block;
  width: 23%;
  margin: 1%;
  text-align: left;
  font-size: 12px;
}
 
li .link i {
  z-index: 4;
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 0%;
  margin: 0px 0px -24px -24px;
  width: 48px;
  height: 48px;
  background: url(http://i.imgur.com/FZaEYsL.png) no-repeat center center;
  border-radius: 50%;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 1);
  transition: all 0.20s ease-out;
}
 
li .link img {
  width: 100%;
  transition: all 0.20s ease-out;
  margin-top: -2%;
  margin-bottom: -15%;
}
 
li:hover .link i {
  opacity: .8;
  bottom: 50%;
}
 
li:hover .link img {
  transform: rotate(0deg) xscale(1.03);
}
 

Demo:
http://codepen.io/AngelKrak/pen/jPvqaz