JMiur [E]

Estos son cuatro de los ejemplos mostrados en el blog de Alessio Atzeni que nos ilustra sobre varios métodos de agregar transiciones en imágenes.

Cada uno de ellos tiene la misma estructura donde lo único que va cambiando es la clase del primer DIV a las que identifico como efecto1, efecto2, efecto3 y efecto4:
<div class="view efecto">
  <img src="URL_IMAGEN" />
  <div class="mask"></div>
  <div class="content">
    <a target="_blank" href="URL_ENLACE" class="info" title="abrir enlace">ver</a>
  </div>
</div>
En el DIV contenedor se incluye una imagen y dos DIVs extras, el primero (mask) es donde veremos el efecto y el segundo (content) es optativo y puede contener cualquier tipo e enlace.
El estilo general sería este:
<style>
  .view {  /* contenedor principal */
    border: 10px solid #ABC;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
  }
  .view img { /* la imagen */
    display: block;
    position: relative;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
  }
  .view .mask { /* máscara con el efecto */
    cursor:pointer;
    height: 200px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 300px;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;
    -ms-transition:all 1s;
    transition:all 1s;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
  }
  .view .content { /* contenedor con el enlace optativo */
    height: 200px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 300px;
  }
  .view a.info { /* el enlace optativo */
    background:url(URL_imagen) center no-repeat;
    display: inline-block;
    height:20px;
    opacity:0;
    padding:0;
    position:relative;
    text-decoration: none;
    text-indent:-9999px;
    width:20px;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
  }
  .view:hover a.info { /* efecto sobre el enlace */
    opacity:1;
    -moz-transform:translateY(100px);
   -webkit-transform:translateY(100px);
   -o-transform:translateY(100px);
   -ms-transform:translateY(100px);
   transform:translateY(100px);
  }
</style>
Y ahora, las variantes; por ejemplo el efecto1:



<style>
  .efecto1 img {
    opacity:1;
    -moz-transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -o-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform:scale(1,1);
  }
  .efecto1 .mask {
    border-color:rgba(0,0,0,0.7) transparent transparent transparent;
    border-style:solid;
    border-width:150px;
    height:0;
    opacity:0;
    width:0;
    -moz-transform:translateY(-125px);
    -webkit-transform:translateY(-125px);
    -o-transform:translateY(-125px);
    -ms-transform:translateY(-125px);
    transform:translateY(-125px);
  }
  .efecto1:hover img {
    opacity:0.7;
    -moz-transform:scale(2,2);
    -webkit-transform:scale(2,2);
    -o-transform:scale(2,2);
    -ms-transform:scale(2,2);
    transform:scale(2,2);
  }
  .efecto1:hover .mask {
    opacity: 1;
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
</style>



<style>
  .efecto2 .mask {
    border: 0 solid rgba(0, 0, 0, 0.7);
    opacity: 0;
  }
  .efecto2:hover .mask {
    border-width: 101px;
    opacity: 1;
  }
</style>



<style>
  .efecto3 .mask {
    border-radius: 50px;
    border: 50px solid rgba(0, 255,255, 0.3);
    display: inline-block;
    height: 100px;
    left:101px;
    opacity:1;
    position:absolute;
    top:50px;
    width: 100px;
    -moz-transform:scale(4);
    -webkit-transform:scale(4);
    -o-transform:scale(4);
    -ms-transform:scale(4);
    transform:scale(4);
  }
  .efecto3:hover .mask {
    border:0px solid rgba(0, 255,255, 0.3);
    opacity: 0;
  }
</style>



<style>
  .efecto4 img {
    opacity:0.2;
  }
  .efecto4 .mask {
    border:100px solid rgba(255, 255, 0, 0.1);
    opacity:1;
  }
  .efecto4:hover .mask {
    border:0px double rgba(0, 0, 0, 0.5);
    opacity:0;
  }
  .efecto4:hover img {
    opacity:1;
  }
</style>

13 comentarios:

davisdrumkey  

me gusta me gusta

Responder
Amiitha  

quedan hermosos los efectos =)
en lo personal me encanta la última opsion *.*
ya veré en donde lo aplico~!

Responder
Graciela  

Geniales, encantadores, me gustan opción 2,3,4 :P

Responder
Gem@  

Una maravilla de efectos.
(Don Vagabundia en su blog tampoco sale la opción de suscribirse a comentarios ni con la nueva ni la antigua opción)

JMiur  

Ahí la veo, Gem@; tanto en als respuestas como en el formulario inferior.

También al veo en tu blog ¿Habrá sido un error temporal?

Responder
CocinaCoco  

:D Muy bonitos efectos y elegantes
JM...me encantó!!

Responder
Stranno  

¿Usan algún tipo de aceleración gráfica? Porque me salta el contador de frames de las herramientas de ATI al pasar el cursor por las transiciones :S

JMiur  

No sé qué herramienta es esa ni cuál es su uso. Las transciiones son ejecutadas internamente por los navegadores.

Responder
Manfenix  

Me gusta el primer efecto,
Gracias JMiur, :)

Responder
Beben Koben  

WOW...really nice hover effect ♥

Responder
Diak Chimba  

Hola como estas JMiur, quisieras que me ayudares en implementarlo en la pagina principal esta es la direccion http://fjbrownr.blogspot.com/

JMiur  

Tendrías que intentarlo y mostrar tu ejemplo para ver si hay algún problema.

Diak Chimba  

Si pero quiero que me explique mejor como puedo implementarlo paso a paso en el blog en la Pagina principal.

Y gracias por tu ayuda de antemanos.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR