Problema hover effect con filtros

[MadDunDee]

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!

[MadDunDee]

Tengo un par de asuntos más por pulir en este mismo proyecto. Si quieres ayudarme y te ves con capacidad de resolver estos puntos, creo que no son dificiles par alguien con experiencia, puedo pagar hasta 20€/hora.

Agradecería cualquier tipo de orientación desde el foro o una ayuda remunerada directamente como digo.

Muchas gracias.

[chicohot20]

Me gustaria ayudarte, pero no entiendo. talvez si lo vemos online puedo ayudarte.

[chichote]

Trate de seguirte la idea, pero me perdi jeje, falta de concentracion diria yo.

Lo mismo que chicohot20, publica un demo para entender mejor la idea.


saludos.