CODEWITHSUNDEEP
htmlcsscss-animations
user765368
user765368

Reputation: 20346

image dim and zoom with text

I have an image on which I have some texts. When I hover on the image, I want the image to dim and zoom in. That is working properly, but the problem I have is that the texts on my image get dimmed too as the image dims out. I don't want the text to dim out with the image. How can I achieve that?

Check this Bootply for the code

NOTE : The image is placed as the background of the div that contains my texts

Upvotes: 0

Views: 166

Answers (1)

Ted Whitehead
Ted Whitehead

Reputation: 1826

This is happening because you set opacity: .444; on the parent wrapper, which applies to all children as well.

Instead of adjusting the opacity, I would fade in an overlay using a pseudo element and add z-index to the text wrapper to keep it above the overlay.

.hovereffect .overlay2 {
  /* your styles here */
  z-index: 1;
}

.hovereffect:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

Then on hover, set the opacity to 1.

.hovereffect:hover:after { opacity: 1; }

Upvotes: 1

Related Questions