Hay ocasiones en que utilizamos un plugin para galerías y lightbox que por funcionalidad nos sirven pero al que le falta algún detalle que nos iría bien por diseño.
Recientemente me he encontrado en este caso en que el cliente quería una galería fotográfica en que se vieran las miniaturas y pudieran ampliarse, pero que además, el thumbnail o miniatura mostrara un icono o imagen de lupa en una esquina para indicar al usuario esta funcionalidad.
Como la galería además requería otras funcionalidades, no encontraba ningún plugin que por defecto tuviera todo lo que yo necesitaba (cosa que suele ocurrir), así que opté por utilizar el que más funcionalidades me ofrecía y al que sólo le faltaba el detalle del efecto roll-over y la lupa y lo añadí mediante un poco de CSS.
Ejemplo:
<div class="efectolupa"><img src="ruta-imagen" alt="" /></div>
.efectolupa { cursor: pointer; }
.efectolupa img:hover {
filter: brightness(50%);
-webkit-filter: brightness(50%);
}
.efectolupa:after {
content: '\f002';
position: relative;
color: #ccc;
width: 30px;
height: 30px;
bottom: 59px;
left: 458px;
font-family: FontAwesome;
font-style: normal;
opacity: 0.8;
font-size: 18px;
}
A tener en cuenta:
- En este caso utilizamos el icono de la lupa de FontAwesome porque en la web ya lo teníamos cargado para otros temas. Mira si en tu web utilizas esta fuente de iconos o otra y aprovecha la que ya tengas insertada.
- La colocación de la lupa (valores bottom y left) dependerán del tamaño de la miniatura y de dónde quieras colocarla.
- El color de la lupa también deberás adaptarlo a los tonos de las fotografías, si son de fondo blanco, deberás ponerlo en algún tono de gris, por ejemplo.
De esta forma, con pocas líneas de CSS podemos completar las funcionalidades de galería que el plugin no nos ofrecía sin tener que optar por otro diferente únicamente por este detalle.
