Cambiar imágenes con CSS. Presentando al equipo | Oloblogger Esta es una cosa relativamente sencilla pero que con una combinación de gráficos adecuada puede qued...

15 de mayo de 2012

Cambiar imágenes con CSS. Presentando al equipo

Esta es una cosa relativamente sencilla pero que con una combinación de gráficos adecuada puede quedar bastante bien. Se trata de disponer de dos imágenes y hacer una sustitución simple con CSS aprovechando la pseudoclase hover, pero la imaginación de cada cual es la que puede convertir simple código en algo agradable a la vista.

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>


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;
}


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...

follow us in feedly

14 comentarios :

  1. Interesantísimo, me lo guardo para cuando le encuentre utilidad.
    Gracias Oloman.
    Un saludo.

    ResponderEliminar
  2. Ya sé que no viene al caso de esta entrada, pero sí a un comentario que pusiste hace poco en CiudadBlogger...
    Mira lo que he encontrado escrito por uno de los creadores de la etiqueta <blink>:
    http://www.montulli.org/theoriginofthe%3Cblink%3Etag

    ResponderEliminar
    Respuestas
    1. Vaya, al final no fue exactamente una broma, sino el resultado de una noche de copas malinterpretada por un ingeniero. Interesante documento Emilio :)

      Eliminar
  3. Hola 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?

    ResponderEliminar
    Respuestas
    1. Hola. En lugar de esto...
      img {
      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;
      }

      Eliminar
  4. Ayesome :)
    Btw where did u usually convert a picture into cartoon?

    ResponderEliminar
    Respuestas
    1. Jajaja... These pictures aren't mine. Alba Diethelm -linking at the beginning- is the author. Sorry I don't know. Try to ask her.

      Eliminar
  5. Gracias 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

    ResponderEliminar
  6. Muchas gracias oloman, me haz ayudado para seguir creciendo! (:

    ResponderEliminar
  7. Muy buenas, el artículo es muy interesante, sin embargo a la hora de utilizarlo en Drupal no me funciona. ¿Alguien sabría decirme porqué?

    ResponderEliminar
    Respuestas
    1. Si 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.

      Eliminar
  8. hola 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

    ResponderEliminar
    Respuestas
    1. Supongo 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