1

In a total mind blank and can't quite find the answer on Google - call it old age I think.

My problem:

I want to use a CSS created button to change an image on the same page when the user hovers over the button.

Eventually I will have 3 buttons, each one with an image sitting below it. When a user does a mouseover on each button then corresponding image below it would change from greyscale to colour.

I can make it work for a link, but if I apply the class to a CSS styled button, the button also becomes greyscale which I don't want to happen. This button style should be independent of the style that applies to the image state.

CSS:

.image1 {-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}   
.image1:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}


.image2{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}
.image2:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}

.image3{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}
.image3:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}

HTML:

<a href="#" class="image1">THIS WILL BE A BUTTON</a>
<br>

<img src="testimage.png" class="image1">

<a href="#" class="image2">THIS WILL BE A BUTTON</a>
<br>

<img src="testimage.png" class="image2">

<a href="#" class="image3">THIS WILL BE A BUTTON</a>
<br>

<img src="testimage.png" class="image3">
Chris
  • 25
  • 3
  • So ok - you want to have to so when you hover over a button, you want the grayscale image but keep the link color. Correct? – kawnah Oct 09 '18 at 20:33
  • Yes that's right, sorry should've made it clearer. I'm already using a button style that has a hover effect on it (using Wordpress DIVI theme) but also want it to control the hover state of the image below it. – Chris Oct 09 '18 at 20:36

2 Answers2

0

You can use 'next sibling' selector to change the image, if you skip the '<br>' tag in between (use css to add Space between them):

<a href="#" class="image1">THIS WILL BE A BUTTON</a>
<img src="testimage.png" class="image1">

Now add the 'hover' selector to your '<a>':

a.image1:hover + img{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */

This should change the image, if it's the next sibling.

Poul Bak
  • 10,450
  • 5
  • 32
  • 57
0

you need to do this:

.image {-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);}   
.image:hover{-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);}


/*When you hover a link, make the image color*/

.image-link:hover + .image {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}
<a href="#" class="image-link">THIS WILL BE A BUTTON</a>

<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" class="image">

<a href="#" class="image-link">THIS WILL BE A BUTTON</a>

<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" class="image">

<a href="#" class="image-link">THIS WILL BE A BUTTON</a>

<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" class="image">

You basically set your element to hover, then hit the element you want to change.

More info here: How to affect other elements when a div is hovered

kawnah
  • 3,204
  • 8
  • 53
  • 103