CODEWITHSUNDEEP
css
panthro
panthro

Reputation: 24059

Hover over element, change opacity on child?

<li>
    <img src="m.jpg">
    <div class="img-data">img name</div>
</li>

Is it possible using just css to show .img-data on hover of the li? .img-data has opacity set at zero currently.

Upvotes: 2

Views: 1192

Answers (1)

Tushar
Tushar

Reputation: 4418

Try this

ul {
  list-style: none
}

.img-data {
  opacity: 0
}

li:hover .img-data {
  opacity: 1
}
<ul>
  <li>
    <img height="60" src="https://via.placeholder.com/350x150">
    <div class="img-data">img name</div>
  </li>
</ul>

Upvotes: 3

Related Questions