Es el caso de Alba Diethelm, que quería presentar en su espacio web (en construcción) mediante un sistema similar, a los miembros del equipo de su nuevo proyecto. De ella es esta idea y las imágenes de este ejemplo ilustrativo y nosotros sólo hemos puesto la parte técnica.
Pasando el cursor por encima de cada cara podréis ver los nombres y cargos de cada componente del grupo. Si os gusta, más adelante la explicación y el código con el que hacer esto.
La construcción del HTML es la habitual de una imagen con enlace y el truco en esta parte sólo consiste en insertar dentro de dicho enlace, una segunda imagen entre etiquetas span. Estas serían las dos primeras y como veis no tienen ninguna ciencia: una con la cara y otra que además de la cara lleva un rótulo.
Con las etiquetas span lo que conseguimos es poder independizar cada par de imágenes dentro de cada enlace. La segunda aparecerá solapada sobre la primera, pero sólo se verá cuando hagamos hover. La estructura sería esta:
<div class="presentar">
<a href="#">
<img alt="" src="IMAGEN_1a" />
<span>
<img alt="" src="IMAGEN_1b" />
</span>
</a>
<a href="#">
<img alt="" src="IMAGEN_2a" />
<span>
<img alt="" src="IMAGEN_2b" />
</span>
</a>
<a href="#">
<img alt="" src="IMAGEN_3a" />
<span>
<img alt="" src="IMAGEN_3b" />
</span>
</a>
</div>
<div style="clear: both;"></div>
<a href="#">
<img alt="" src="IMAGEN_1a" />
<span>
<img alt="" src="IMAGEN_1b" />
</span>
</a>
<a href="#">
<img alt="" src="IMAGEN_2a" />
<span>
<img alt="" src="IMAGEN_2b" />
</span>
</a>
<a href="#">
<img alt="" src="IMAGEN_3a" />
<span>
<img alt="" src="IMAGEN_3b" />
</span>
</a>
</div>
<div style="clear: both;"></div>
La parte CSS también es fácil pues sólo hace falta estilo para los enlaces de la clase que hemos creado (presentar), sus span y el hover.
El contenedor general será el enlace, al que le asignaremos una posición relativa para luego poder situar de manera absoluta la segunda imagen dentro de él. Lo que conseguiremos con esto es que ambas imágenes realmente estén una encima de otra en el mismo espacio, el destinado al enlace.
Luego pondremos una opacidad nula a la segunda imagen -la de dentro del span-, o lo que es lo mismo, la haremos transparente. Para que se vea al hacer hover, aplicamos a ese estado una opacidad total y así será cómo logremos ver el contenido.
Así que esto es lo que hay que teclear (o copiar) en nuestra hoja de estilo:
.presentar {
text-align: center;
}
.presentar a, .presentar img, .presentar a span {
border:0;
padding:0;
margin:0;
}
.presentar a {
position: relative;
display: inline-block;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
}
.presentar a:hover span {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
text-align: center;
}
.presentar a, .presentar img, .presentar a span {
border:0;
padding:0;
margin:0;
}
.presentar a {
position: relative;
display: inline-block;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0px;
left: 0px;
}
.presentar a:hover span {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
A partir de aquí y cómo decía al principio, la imaginación de cada uno es lo importante. Con esto se podría hacer también por ejemplo un menú gráfico, ya que los enlaces que aquí hemos dejado vacíos (#) se podrían rellenar perfectamente para que llevaran a algún lado. Seguro que se os ocurren otras utilidades.
Lo que viene al final es una pequeña variante en la que la segunda imagen se ha desplazado un poco con respecto a su respectivo original de manera que la alternancia de ambas simulen movimiento.
Estas dos demos combinadas y el código publicado, también lo podéis encontrar subido a Dabblet.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Interesantísimo, me lo guardo para cuando le encuentre utilidad.
ResponderEliminarGracias Oloman.
Un saludo.
Seguro que ves algo ;)
EliminarYa sé que no viene al caso de esta entrada, pero sí a un comentario que pusiste hace poco en CiudadBlogger...
ResponderEliminarMira lo que he encontrado escrito por uno de los creadores de la etiqueta <blink>:
http://www.montulli.org/theoriginofthe%3Cblink%3Etag
Vaya, al final no fue exactamente una broma, sino el resultado de una noche de copas malinterpretada por un ingeniero. Interesante documento Emilio :)
EliminarHola Oloman, una pregunta, yo quiero ponerle una imagen flotante en la parte inferior derecha a mi blog, ya la diseñe, esta en formato png, es para que diga ¡No olvides comentar!, lo único malo que tengo es que mi plantilla le coloca a todas las imágenes un marco marrón (no importa si es de un gadget o de la entrada de un post, siempre se coloca un marco marrón) y la imagen no tiene transparencia, osea las partes que deberían ser transparente salen con un background marrón... como puedo solucionar ese problema?
ResponderEliminarHola. En lugar de esto...
Eliminarimg {
background:#e2dbd1;
border: 1px solid #d1bfa6;
margin:0 10px 10px 0;
padding:3px;
}
...utiliza esta otra clase para que sólo se cambien las imágenes de las entradas:
.post img {
background:#e2dbd1;
border: 1px solid #d1bfa6;
margin:0 10px 10px 0;
padding:3px;
}
Ayesome :)
ResponderEliminarBtw where did u usually convert a picture into cartoon?
Jajaja... These pictures aren't mine. Alba Diethelm -linking at the beginning- is the author. Sorry I don't know. Try to ask her.
EliminarGracias Oloman. A mí me sirve de mucho para mostrar blogs y sitios webs que me encuentro por ahí. Una vez más muchas gracias!! saludos
ResponderEliminarMuchas gracias oloman, me haz ayudado para seguir creciendo! (:
ResponderEliminarMuy buenas, el artículo es muy interesante, sin embargo a la hora de utilizarlo en Drupal no me funciona. ¿Alguien sabría decirme porqué?
ResponderEliminarSi viste la demo que puse en Dabblet, podrás comprobar que esto funciona independientemente de la plataforma en la que se utilice. Quizás pusiste mal algo.
Eliminarhola i para hacer la propiedad activo es decir cuando cliques a la imagen y se vya a a una neuva pagina quiero que la imagen clicada salga de otro color como lo ago
ResponderEliminarSupongo que te refieres a marcar los enlaces visitados con otro color como ocurre con los de texto. Quizás se pueda hacer, pero no se me ocurre cómo hacerlo con imágenes.
Eliminar