Hola!
Estoy montando un portfolio donde quiero conseguir un efecto muy concreto. Veréis, se trata de tener una pared con todos los trabajos que ocupan toda la ventana del navegador. Nada más cargar la página por css hago que todos los trabajos tengan una opacidad de 0.4 y cuando el usuario hace hover sobre cada item este obtiene una opacidad del 100%, así:
Código PHP:
.thumb {
float: left;
width: 175px;
opacity:0.4;
overflow:hidden;
}
.thumb:hover{
-moz-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity:1;
}
Bien, hasta aquí todo OK. Pero además uso un sistema de filtros para cada una de las categorías de los trabajos incluidos. El filtro funciona de la siguiente manera:
Código PHP:
$("#filter-menu a").click(function() {
var cat = $(this).attr("class");
$("#works .thumb").not("."+cat).fadeTo(250, 0.1);
$("#works .thumb").filter("."+cat).fadeTo(250, 1);
$("#filter-menu a").parent().removeClass("active");
$(this).parent().addClass("active");
return false;
});
$("#filter-menu a.none").click(function() {
$("#works .thumb").fadeTo(250, 0.4);
});
Así cuando un filtro se activa, pongamos por ejemplo photography, todos los trabajos relativos a esa clase/categoría suben su opacidad hasta el 100% y el resto disminuye hasta el 40%.
Mi problema viene entonces, porque para que funcione como debe si el usuario hace hover sobre cualquier item este, porque así lo dice la css, realiza una transición de su opacidad pasando del 0.1 en el que está, al 100% mientras el usuario está sobre el item y al 0.4 cuando deja de estas sobre/hover. Con lo cual se pierde la lógica de lo que se pretende, que es aislar todos aquellos trabajos que no tengan que ver con la categoría por la que se ha filtrado. Así mismo cuando se realiza hover sobre uno de los trabajos que sí corresponden con la categoría sucede lo mismo. Está al 100%, pasa al 100% (no pasa nada), pero cuando el usuario deja de estar sobre este pasa al 0.4 de opacidad. De modo que pierde el filtro que marca el 0.1 de opacidad.
Tengo dos botones más en los filtros, uno que quita cualquier filtro -todos los trabajos a 0.4 de opacidad- y el otro hace filtrar todos los trabajos, es decir, que pone al 100% de opacidad todos.
Espero haber explicado correctamente mi problema y que alguien me pueda echar un cable con ello porque la verdad es que he probado muchas cosas y no me funciona nada!
Un saludo!