Css kombiniert mehrere Hover-Effekte

Question

Was ich versuche zu erreichen ist, dass, wenn das div über die background-color eingeblendet wird, das gerundete Bild in der Größe skaliert und eine Textüberlagerung gleichzeitig über dem Bild erscheint.

Ich bin nahe daran, es zu erreichen, wie ich die background-color Übergang und Bildskalierung zur gleichen Zeit arbeiten, aber ich kann nur die Text-Overlay auslösen als wenn ich den Mauszeiger über das Bild.

Jede Hilfe würde sehr geschätzt werden.

Demo in den Kommentaren.

Answer 1

Sie müssen Ihr CSS ändern, um die Hover-Animation anzuwenden, wenn das div-Element .hvr-fade anstelle des div-Elements .textfade verschoben wird.

Von

.textfade:hover { 
    opacity:1; 
} 

.textfade:hover h2 { 
    -moz-transform: translateY(40px); 
    -webkit-transform: translateY(40px); 
    transform: translateY(40px); 
} 

Um

.hvr-fade:hover .textfade { 
    opacity:1; 
} 

.hvr-fade:hover .textfade h2 { 
    -moz-transform: translateY(40px); 
    -webkit-transform: translateY(40px); 
    transform: translateY(40px); 
} 

CodePen