Un poquito de HTML: imagen que duplica su tamaño al pasar el ratón.

Pues tarde o temprano hay que meterse en cosas de decoración y retocar alguna página web. En esta ocasión me pedían colgar en una página que usamos como intranet del centro unas miniaturas de otras páginas web y añadir un efecto que hiciera que dichas miniaturas aumentasen de tamaño hasta hacerse bien visibles al pasar el cursor del ratón sobre ellas. Como me ha costado un poco averiguar como hacerlo lo dejo aquí para que conste.

En primer lugar tenemos un script que hace capturas de las páginas en cuestión (utilidad wkhtmltoimage), generando un fichero en formato .png y ajustando luego el tamaño (utilidad mogrify):

#!/bin/bash

DESTINO="/var/www/intranet/images"

/usr/bin/wkhtmltoimage --quality 50 http://iesvdeguadalupe.juntaextremadura.net  $DESTINO/ies-webpage.png
/usr/bin/wkhtmltoimage --quality 50 http://iesvirgendeguadalupecc.blogspot.com.es   $DESTINO/ies-blog.png

/usr/bin/mogrify -crop 800x1000+0+0 $DESTINO/ies-blog.png
/usr/bin/mogrify -crop 800x1000+0+0 $DESTINO/ies-webpage.png

exit 0

Este script es llamado periódicamente desde algún crontab para actualizar ambas imágenes conforme se actualizan las webs.

Ahora nos toca mostrar esas imágenes con el efecto de aumento. Tras refrescar mi CSS y buscar un poco en Internet (lo que me ha servido para confirmar que .css es en algunos aspectos un lenguaje funcional: te le dices donde quieres llegar y el se ocupa del cómo). El estilo definido es:

/*============
DIV ZOOMING
=============*/

#boxcontainer{
 position: relative;
 width:650px;
 height: 400px;
}
.box{
 position:relative;
 float:left;
 width:315px;
 height:100%;
 margin:5px;
}
.Inside{    
 position:absolute;
 top:0;
 left:0;
 width:290px;
 height:100%;
 transition:all 0.5s ease-in-out;
 -webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
 z-index:100;
 transform: scale(2);
 transform-origin: top right;
}

Se definen los tamaños de las cajas que contendrán ambas imágenes y luego el efecto:

• En "Inside": indicamos que habrá una transición (el efecto de aumento) y específicamos el tiempo que tomará en realizarse.
• En "Inside:hover": se define como cambiará "Inside" cuando el ratón pase por encima ("hover"). Se define un z-index de 100 para que esté en primer plano, por encima del resto, la transformación con un reescalado x2 y la dirección del movimiento partiendo de arriba-derecha (había abajo-izquierda).

Por último el HTML que hace uso de los estilos anteriores, que será lo publicado en la Intranet del centro:

<div id="boxcontainer">
  <div class="box">
    <div class="Inside">Blog
      <a href="http://iesvirgendeguadalupecc.blogspot.com.es/" target="_blank">
        <img style="height: 100%; width: 100%; object-fit: contain;" src="/intranet/images/ies-blog.png" alt="" />
      </a>
    </div>
  </div>
  <div class="box">
    <div class="Inside">Web
      <a href="https://iesvdeguadalupe.educarex.es/" target="_blank">
        <img style="height: 100%; width: 100%; object-fit: contain;" src="/intranet/images/ies-webpage.png" alt="" />
      </a>
    </div>
  </div>
</div>

Tenemos las dos imágenes, apuntando a las webs respectivas, dentro de una caja y con el efecto de aumento implantado usando el estilo "Inside". En la siguiente captura vemos el resultado con una de las imágenes en proceso de expansión:

Bueno, nos vamos pero no del todo: publicaremos alguna cosita curiosa más a lo largo de este raro verano.