CODEWITHSUNDEEP
htmlcss
Ettur
Ettur

Reputation: 789

Remove grayscale from picture when hovering over a link

EDIT: I solved this problem by making the entire image a link, and the text (former link) that was on the picture i put - pointerevents: none. That way I sort of accomplished what I wanted.

I put image, im hovering over the link that is colored, I want the corresponding picture (top left) to remove grayscaleI have pictures on a page when you hover over them they turn from grayscale to normal colored picture. By default they are seen as grayscale.

Then I have links on that page as well. What I was is, when I hover mouse over link 1 id like the picture 1 to change from grayscale to normal. Same with link 2 and picture 2.

As if mouse was in 2 places at the same time, hovering on link and picture. How can I link them?

<div class="image">
    <img src="images/martin.jpg" alt="kisat">
        <div class="linkcontainer"><a class="teksti" href="urheilija.html">URHEILIJA</a></div>
</div>

Upvotes: 0

Views: 347

Answers (1)

Nico Schuck
Nico Schuck

Reputation: 982

If the link is directly inside the picture:

#link:hover > #picture { gray-scale: 0; }

If link is next to (after picture closing tag) the picture:

#link:hover + #picture { gray-scale: 0; }

If the link is somewhere inside the picture:

#link:hover #picture { gray-scale: 0; }

If the link is a sibling of the picture:

#link:hover ~ #picture { gray-scale: 0; }

Solution example:

<div class="image">
  <a href='...'>LINKTEXT</a>
  <img id="img" src="...">
</div>

<style>
  .image { position: relative; }
  .image a {
    position: absolute;
    bottom: 0px;
    left: 0; 
    right: 0; 
    text-align: center;
    z-index: 1;
  }
  a:hover + #img { filter: grayscale(0); }
  #img { filter: grayscale(1); }
</style>

Upvotes: 1

Related Questions