Muchas veces nos hemos encontrado con diferentes efectos sobre imágenes que se ejecutan o se visualizan al situar el cursor del ratón encima de estas, en este caso te vamos a proponer un efecto muy sencillo que trata de que al poner el ratón encima de la imagen esta imagen se aclare, o mejor dicho, reduzca su opacidad.

Para realizar este efecto sencillo sobre las imágenes lo primero que debemos hacer es crearnos nuestra galería de imágenes.

<ul class="galería">
    <li><a href="coche1.jpg" target="_blank">
		<img src="coche1.jpg" alt="coche1">
		<div class="oculto"></div></a>
	</li>
	<li><a href="coche2.jpg" target="_blank">
		<img src="coche2.jpg" alt="coche2">
		<div class="oculto"></div></a>
	</li>
	<li><a href="coche3.jpg" target="_blank">
		<img src="coche3.jpg" alt="coche3">
		<div class="oculto"></div></a>
	</li>
</ul>

Realmente lo que vamos a hacer es mostrar una capa de color blanco encima de la imagen, en nuestra lista nos hemos creado un elemento que contiene un enlace a la imagen, la imagen y la capa que se mostrara, estas capas en principio estarán todas ocultas. Debemos añadir el siguiente código css para ocultar todas las capas.

<style type="text/css">

.galería li a img {
    height: 200px;
    width: 250px;
}
.galería {
    list-style-type: none;
}
.galería li {
	float: left;
	position: relative;
	margin-top: 20px;
	margin-left: 20px;
}
.oculto {
	background-color: #FFF;
	height: 200px;
	width: 250px;
	position: absolute;
	top: 0px;
	opacity:0;
}
</style>

Con este código lo que hacemos es especificar el tamaño de la imagen y ocultar todos las capas o div cuya clase sea «oculto».

Por último lo que haremos sera introducir el siguiente código:

<script type="text/javascript">
$(document).ready(function(){
    $(".galería li").hover(function(){
		$(this).find("div").animate({opacity:0.6},300);
	},function(){
		$(this).find("div").animate({opacity:0},300);
	});
});
</script>

Con este código lo que le indicamos es que al situarnos sobre un elemento de la lista (o sea una imagen) se muestre la capa que contiene, y al situarnos se oculte dicha capa.

Hay que tener en cuenta que tenemos que incluir un archivo jquery como el «jquery-1.8.3.min.js«

Podéis ver un ejemplo funcionando aqui: