Transparencias y bordes a imágenes

Veremos dos útiles trucos para hacer más vistozas las imágenes que contengan enlaces. El primero, agrega un borde a la imagen cuando pasamos el puntero por encima, y el segundo, lo muestra con transparencia y luego gana su totalidad de color cuando hacemos un mouseover.

Bordes

Para aplicar los bordes, debemos crear un estilo que varie el valor de la propiedad border.

Simplemente agrega un borde sólido de 1 pixel de color gris en primera instancia, y cuando se produce el hover cambia a un color más oscuro para hacer notar el borde.

.borderit img{
border: 1px solid #ccc;
}

.borderit:hover img{
border: 1px solid navy;
}

Y dentro de las propiedades del enlace le agregamos la llamada al estilo:

<a href="http://www.webexperto.com" class="borderit"><img border="0" src="264_simpsons.jpg"/></a>
<a href="http://www.webexperto.com" class="borderit"><img border="0" src="264_cookie.jpg"/></a>

Transparencias

Para las transparencias, debemos utilizar la propiedad filter de CSS.

.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

Y el HTML:

<a href="http://www.webexperto.com" class="opacityit"><img border="0" src="264_simpsons.jpg" /></a>
<a href="http://www.webexperto.com" class="opacityit"><img border="0" src="264_cookie.jpg" /></a>