Change image on hover

[Lorenmn]

I’ve looked at other support and forum topics but can’t find anything that works.

I have an image that I want to have an alternate image on hover. I’ve tried applying a class and some css (that I found in the forum) but it doesn’t work.

This is the page
http://77.104.180.227/~theweb53/themagicofyoga.co.uk/
The first image (‘what is yoga’) is where I’d like to have an alternate image.

Can you help?

[ruenel]

Hello There,

Thanks for writing in! Regretfully there isn’t an option where you can easily change the image on hover. It will take a little modification of your current column setup with custom css to accomplish this. You will need the following:
1.) In each of your column, you will need to add a custom ID. For example, my-column-one, my-column-two, my-column-three. We will be using the IDs for the custom css
2.) You may add the custom css like this:

#my-column-one, #my-column-two, #my-column-three {
  min-height: 230px;
}

#my-column-one{
  background-image: url(http://placehold.it/200x200/eeffcc);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

#my-column-one:hover{
  background-image: url(http://placehold.it/200x200/ddaacc);
}

#my-column-two{
  background-image: url(http://placehold.it/200x200/aaffcc);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

#my-column-two{
  background-image: url(http://placehold.it/200x200/aaccff);
}

#my-column-three{
  background-image: url(http://placehold.it/200x200/ccffee);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

#my-column-three{
  background-image: url(http://placehold.it/200x200/ffeebb);
}

3.) You will have to remove the image you have inserted in the column right now. It is no longer needed. If it is necessary to add a button then you can insert it in the column.

Hope this helps.

[Lorenmn]

Hi,
I’m afraid doing it that way mean’t that all my columns were messed up when responsive.

I’ve managed to get it to work on the image element so as to avoid background images (this was a previous problem). However, the alternate images are not centred and I can’t seen to use the text-align tag to fix it.

In addition, on tablet and mobile, the hover (click) increases the size of the alternate image.

Can you help?

[jade]

Hi there,

Please try this instead:

#box1:hover img {
    content: url(http://77.104.180.227/~theweb53/themagicofyoga.co.uk/wp-content/uploads/2017/12/box-1-hover.png);
}

Hope this helps.

[Lorenmn]

Awesome! Such a simple fix - I just couldn’t work it out. Thanks!

[thai]

You’re welcome.