Ich kann anscheinend keine Beispiele dafür finden, dass das schon einmal irgendwo im Internet gemacht wurde, aber hier ist, was ich versuchen werde ... Ich versuche, den saubersten möglichen Weg zu gehen, dies zu tun aus.
Also habe ich eine Bildergalerie, wo die Bilder alle verschiedene Größen haben. Ich möchte es so machen, dass wenn Sie das Bild über das Bild bewegen, es sich um eine orange Farbe dreht. Nur ein einfacher Hover-Effekt.
Ich möchte dies tun, ohne einen Bildaustausch zu verwenden, sonst müsste ich für jedes einzelne Galeriebild ein orangefarbenes Hover-Bild erstellen, ich möchte, dass es etwas dynamischer wird.
Mein Plan ist nur, ein leeres div über das Bild absolut mit einer Hintergrundfarbe, Breite und Höhe 100% und Deckkraft: 0 zu positionieren. Dann benutze ich jQuery, bei mouseover würde die Deckkraft auf 0,3 oder so überblenden, und Fade bei Mouseout auf Null zurück.
Meine Frage ist, was wäre der beste Weg, um HTML und CSS so effizient und sauber zu gestalten.
Hier ist ein kurzes, aber unvollständiges Setup:
%Vor%Suchen Sie nach etwas wie diesem:
jQuery:
%Vor%HTML:
%Vor%CSS:
%Vor%Tags und Links javascript html jquery css hover