Css combining multiple Hover Effects

Question

What I'm trying to achieve is that when the div is hovered over the background-color fades-in, the rounded image scales in size and a text overlay appears over the image simultaneously.

I'm close to achieving it as I have the background-color transition and image scaling working at the same time but I can only get the text overlay to trigger as when I hover over the image.

Any help would be greatly appreciated.

Demo in the comments.

Answer 1

You need to change your CSS to apply the hover animation when the .hvr-fade div is hovered instead of the .textfade div.

From

.textfade:hover {
    opacity:1;
}

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

To

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

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

CodePen