Truco sencillo para tus imagenes

Solo con CSS podemos dar estilo a nuestras imágenes para llamar la atención sobre ellas. Con los cambios que estoy realizando en el blog he usado un poco de CSS para modificar un poco las imágenes que uso en los enlaces de suscripción. Al pasar el ratón sobre ellas podrás comprobar que se atenúan.

ATENUAR IMAGEN




Añade a tu CSS la siguiente clase

.hov:hover {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

Ahora cada vez que quieras usarlo añade al código de la imagen la clase hov

<img class="hov" src="URL ALOJAMIENTO IMAGEN"/>

RESALTAR IMAGEN




Añade a tu CSS la siguiente clase

.hove {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.hove:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}

Ahora cada vez que quieras usarlo añade al código de la imagen la clase hove

<img class="hov" src="URL ALOJAMIENTO IMAGEN"/>

Autor: Carlos Pizcos . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

+ Diseño-web