Opacity change on image while hovering overlaying text

vilgot harringe 0
Viewed 36

I have an image that changes opacity on hover. the image has text overlay. I want the image opacity to change while hovering the text as well.

Any ideas?

.main {
  background-color: black;
  opacity: 1;
}

.image {
  width: 20%;
  opacity: .5;
}

.image:hover {
  opacity: 1;
}

.text {
  opacity: 1;
  position: absolute;
  font-size: 800%;
  color: white;
  top: 20%;
  left: 6%;
}
<div class="main">
  <img class="image" src="https://via.placeholder.com/300" alt="" />
  <p class="text">lite text</p>
</div>

css html
1 Answers

Add your opacity attribute to the .main div instead of the .image

CSS:

.main {
    background-color: black;
    opacity: 0.5;
}
.main:hover {
    opacity: 1;
}
.image {
    width: 20%;
}

.text {
    opacity: 1;
    position: absolute;
    font-size: 800%;
    color: white;
    top: 20%;
    left: 6%; 
}
veesar0
Related