Image Button

[Christina]

Hi!

How can I add a rollover effect for a custom icon that is a button?

2018-01-02_2017

Thanks!
Christina

[paul.r]

Hi Christina,

To achieve that

1. Add Class to your column.

2. Add two classic image element to your column, the other one is for hover

3. Add first-image class to your first image

<src=“https://content.screencast.com/users/Paul-VirtualWhiz/folders/Jing/media/2f3b320a-63f3-473e-b53c-a28e12ed0a48/2018-01-03_1416.png”>

4. Add hover-image class to your second image

5. Add this in Theme Options > CSS

.img-hover img.hover-image{display:none;}
.img-hover:hover img.first-image{display:none;}
.img-hover:hover img.hover-image{display:inline-block;}

To replicate this in another column, just follow step 2-4.

Hope that helps.

[Christina]

Hi Paul

Thanks. I am not using Pro version. I tried and got this…just stacked icons. https://www.screencast.com/t/aJhx9QtS

How I set-up: https://www.screencast.com/t/yH6p2aGlex

What am I missing?

Thanks for help!

[christian]

Please give us the link of the page so we could check why the code isn’t working.

Thanks.

[Christina]

Thank you: http://www.golfsurvivalguide.com/more-pars-wholelife-challenge/
How do I apply to multiple icons as you’ll see on page.

[jade]

Hi there,

Please try to use this code:

.img-hover {
    position: relative;
}

.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}

.img-hover:hover .first-image {
    opacity: 0;
}

.img-hover:hover .hover-image {
    opacity: 1;
}

Hope this helps.

[Christina]

Works Great! Do I need to change class name for the additional icons on page or do the exact same steps as I did the first one?

Thank you!
Christina

[friech]

Hi Christina,

You can use the same classes for additional icons.

Cheers!

[Christina]

Hi

It is not working when I add this to the other images. http://www.golfsurvivalguide.com/more-pars-wholelife-challenge/

I kept code for Well-being icon so you can see what I mean. Nutrition is the only one that works correctly.

[friech]

Hi Christina,

Please add a CLASS img-hover to the 1/4 columns containing the images. The Nutrition column has that class.

Cheers!

[Christina]

Ahhhhh…yes that is what is missing. Many thanks!

[jade]

You’re most welcome.