0

I am trying to make an effect where when one hovers on my greyscale image, the image turns to color and all the highlights hide.

I have achieved turning my images from greyscale to color on the hover, my problem resides in turning off the multiple highlights.

Here is a link so you can see where I'm at: www.karenrubkiewicz.com

And some coding:

HTML

<a href="#" ><img class="greyscale" src="images/projects/operakrakowska/operakrakowska_01.png" width="750px"/></a>

<span class="highlight">Opera Krakowska</span>
*All highlighted words have been given this span

CSS

img.greyscale {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: grayscale 500ms;
-moz-transition: grayscale 500ms;
-o-transition: grayscale 500ms;
transition: grayscale 500ms;
}

img.greyscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
 }

.highlight{
background-color:#FF0;
}

Further more, I would like the transitions to fade in and out. Any help would be appreciated. Thanks in advance!

krubkiewicz
  • 105
  • 1
  • 2
  • 9

1 Answers1

2

No, there is no "previous sibling" selector. Source

A solution to your problem is to wrap the .highlight and the next a in a div. And write hover for this div.

EG :

HTML

    <div class="item">
        <h3><span class="highlight">Opera Krakowska</span><br>
            <span class="h2">10.15.2013</span><br>
        </h3>
        <a href="#"><img class="greyscale" src="images/projects/operakrakowska/operakrakowska_01.png" width="750px"></a>
    </div>

CSS 

    .item:hover a img.greyscale {
      filter: none;
      -webkit-filter: grayscale(0%);
    }

    .item:hover h3 .highlight{ display:none; }
Community
  • 1
  • 1
karan3112
  • 1,867
  • 14
  • 20