Tema: Superponer una imagen encima de otra al pasar mouse
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/07/2015, 22:27
Avatar de AngelKrak
AngelKrak
 
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años
Puntos: 91
Respuesta: Superponer una imagen encima de otra al pasar mouse
no es algo tan dificil amigo ;) ahi te dejo el codigo y la demo ;)

Código HTML: 
Ver original
  1. <li class="li">
  2.   <a class="link" href="#">
  3.     <i></i>
  4.     <img src="http://img.sipeliculas.com/img-mediano/deep-web-559ada7d98826.jpg" alt="Deep Web">
  5.   </a>
  6. </li>

Código CSS: 
Ver original
  1. .li {
  2.   position: relative;
  3.   display: inline-block;
  4.   width: 23%;
  5.   margin: 1%;
  6.   text-align: left;
  7.   font-size: 12px;
  8. }
  9.  
  10. li .link i {
  11.   z-index: 4;
  12.   opacity: 0;
  13.   position: absolute;
  14.   left: 50%;
  15.   bottom: 0%;
  16.   margin: 0px 0px -24px -24px;
  17.   width: 48px;
  18.   height: 48px;
  19.   background: url(http://i.imgur.com/FZaEYsL.png) no-repeat center center;
  20.   border-radius: 50%;
  21.   box-shadow: 0px 0px 40px rgba(0, 0, 0, 1);
  22.   transition: all 0.20s ease-out;
  23. }
  24.  
  25. li .link img {
  26.   width: 100%;
  27.   transition: all 0.20s ease-out;
  28.   margin-top: -2%;
  29.   margin-bottom: -15%;
  30. }
  31.  
  32. li:hover .link i {
  33.   opacity: .8;
  34.   bottom: 50%;
  35. }
  36.  
  37. li:hover .link img {
  38.   transform: rotate(0deg) xscale(1.03);
  39. }

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