Opacity change on image while hovering overlaying text-CodePudding

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 >
  <img  src="https://via.placeholder.com/300" alt="" />
  <p >lite text</p>
</div>

CodePudding user response：

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%; 
}

CodePudding user response：

I don't think he/she wants what everyone suggests. Read carefully: I want the image opacity to change while hovering the text as well.

Only the opacity of the image needs to be changed on image hovering OR text hovering.

See the snippet below.

.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%;
  z-index: 1;
}

.text:hover   .image {
  opacity: 1;
}

<div >
  <p >lite text</p>
  <img  src="https://images.unsplash.com/photo-1547721064-da6cfb341d50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
</div>