caseybr caseybr - 6 months ago 28
CSS Question

Css combining multiple Hover Effects

I'm a stuck on this one. I'm trying to combine hover effects but I can't seem to get it right. I've spent hours scratching my head on this one but no luck yet.

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

You need to change your CSS to apply the hover animation when the parent div is hovered.

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

Comments