CODEWITHSUNDEEP
htmlcss
user2326844
user2326844

Reputation: 321

how to change the opacity of the text along with the colorscale of the image in css?

I have a list and in it, there is an image with gray scale. There is also a text within that image with zero opacity.

When I hover on the li tag I expect the image to become colorful and the text opacity turns into 1, but with the following codes it does not happen. What could be the problem?

ul.image-list {
  list-style-type: none;
}
span.text-content {
  color: black;
  display: table;
  left: 7%;
  position: absolute;
  top: 9%;
  opacity: 0;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.grayscale {
  border: 1px solid black;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: gray;
  -webkit-transition: all .6s ease;
}
ul.image-list li:hover img.grayscale span.text-content {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
  opacity:1;
}
<div id="container" class="one">
  <ul class="image-list">
    <li>
      <a href="#">
        <img class="grayscale" src="http://placehold.it/75x75" />
        <span class="text-content"><span>Name</span></span>
      </a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 26

Answers (1)

markoffden
markoffden

Reputation: 1468

You should make it look something like...

ul.image-list li:hover img.grayscale {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
}

ul.image-list li:hover span.text-content {
    opacity: 1;
}

So far, the rule you are providing to achieve :hover effect is targeted only to text element... ul.image-list li:hover img.grayscale span.text-content

Upvotes: 1

Related Questions