0

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

user765368
  • 19,590
  • 27
  • 96
  • 167
  • opacity affects all child elements, you would need to reorganize your layout code to make it so that the text element you want to use isn't a child element of the one being made transparent. – Jhecht Feb 12 '16 at 21:07
  • can u provide a cleaner code ? – solimanware Feb 12 '16 at 21:07
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D Feb 12 '16 at 21:33
  • It's **not possible** to affect the opacity of a *background image*. – Paulie_D Feb 12 '16 at 21:34
  • 1
    http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity – Paulie_D Feb 12 '16 at 21:35

1 Answers1

1

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; }
Ted Whitehead
  • 1,731
  • 10
  • 18