Docs

[xtjoeywx]

I would like an image to change to another image on mouse over. If this is possible, can we make it transition smoothly as well? If an instant transition is only possible, that’s fine too.

Please see the image. I’ll post the mouse over image in the next message.

[xtjoeywx]

This attached image is of the 4 “hover over” images.

[xtjoeywx]

This reply has been marked as private.

[Paul R]

Hi,

Thanks for writing in!

To achieve that, please add a unique class to each of your columns.

eg. Add my-column-1, my-column-2, my-column-3, my-column-4

Then add a background image to each by adding this in custom > css in the customizer.
These background images will be visible on hover.

.x-column.my-column-1 {
     background:url(image1.jpg) top center no-repeat;
     background-size:contain;
}

.x-column.my-column-2 {
     background:url(image2.jpg) top center no-repeat;
     background-size:contain;
}

.x-column.my-column-3 {
     background:url(image3.jpg) top center no-repeat;
     background-size:contain;
}

.x-column.my-column-4 {
     background:url(image4.jpg) top center no-repeat;
     background-size:contain;
}

.x-column.my-column-1:hover img,
.x-column.my-column-2:hover img,
.x-column.my-column-3:hover img,
.x-column.my-column-4:hover img {
     opacity:0;
}

Please change image1.jpg,image2.jpg,image3.jpg,image4.jpg with the url of the images you want to appear on hover.

Hope that helps

[xtjoeywx]

I’m having trouble getting this to work right. I’ve made images show up while hovering over it but the background image shows up about 70%-80% transparent. I even tested it with an image that was just bright white to see if it was my first image and the white image is transparent too. Is there anyway to turn transparency off on the background image?

[Paul R]

Hi,

Upon checking, I didn’t see the code get implemented.

Do you mind implementing it so we can see the issue and provide you with additional code.

You may create a test page for this so your home page will remain as is.

Thanks

[Author]

Posts