[SOLUCIONADO] como hacer este efecto sobre la imagen...

[El Cipote]

Saludos... Solicito ayuda sobre como hacer este efecto: Al colocar el puntero del mouse se visualiza un efecto como de cortina sobre la imagen y que al dar clik te direcciona a una pagina en especifico.
Para una mejor claridad dejo el link donde lo he visto:
http://www.alvaromillan.es/
* el efecto esta en el apartado del menu Portalfolio--> Lo que hago (en las imagenes que son las opciones del submenu)

[pzin]

Es simplemente un elemento oculto que cambia su posición al pasar el mouse sobre el padre. Luego con overflow se oculta el contenido que sobresale cuando está oculto.

Por ejemplo, algo así:

Código HTML:

<div>
  Hola hola
  <p>Esto está oculto</p>
</div>
 

Código CSS:

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: gray;
  overflow: hidden;
}
 
p {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 100px;
  margin: 0;
  background: rgba(255,255,255,.5);
  transition: top .5s;
}
 
div:hover p {
  top: 0;
}
 

No lo probé, no sé si pudiera tener algún fallo. Para transition tendrás que usar algún que otro prefijo propietario como -webkit, -moz y demás.

[El Cipote]

gracias @pzin por tu ayuda... he verificado el codigo que indicas y si hace el efecto deseado. Para agregar varias imagenes me imagino que debo hacerlo en el css, es correcto esto?

[pzin]

Puedes hacerlo con CSS, pero seguramente sería más correcto usar <img>.

[El Cipote]

Iniciado por pzin

Puedes hacerlo con CSS, pero seguramente sería más correcto usar <img>.

Esto en el css? pero si son mas de 2 imagenes como hacerlo???