[philkopParticipant]

I made a custom featurebox on my site philswallets.com by adding this as a text element.

[x_feature_box graphic=”icon” graphic_size=”200px” graphic_shape=”circle” graphic_border=”border-width: 3px; border-style: dashed; border-color: rgba(255, 255, 255, 0.60);” graphic_color=”rgba(255, 255, 255, 0.80)” graphic_bg_color=”rgba(255, 255, 255, 0.25)” graphic_icon=”cut” graphic_animation=”pulse” graphic_animation_offset=”50″ graphic_animation_delay=”” align_h=”center” align_v=”” side_graphic_spacing=”” max_width=”” ][/x_feature_box]

How can I add some sort of hover effect so that customers know this is a clickable button? A color change on hover over would be nice, and some kind of slight zoom effect combined with it would be even nicer.

[JackKeymaster]

Hi there @philkop,

Thanks for writing in!

You can change the color on hover by adding custom CSS like this:

.home .x-icon.x-icon-icon-name:hover {
    color: #000000;
}

In your customizer > custom > CSS.

Where icon-name is the name of the icon, if you can link me to the page in question, I’d be happy to provide the specific CSS required. 🙂

Thank you!

[philkopParticipant]

The icon is on my homepage http://www.philswallets.com/#makers

I actually saw that CSS through another forum post and tried it before posting here. It wasn’t working for me, but I may have used the wrong name.

I was using the name of the icon itself, which in this case is “Cut” for the scissor graphic.

[Rue NelModerator]

Hello There,

Thanks for the updates. Please have the code updated and use this instead:

.home .x-icon-cut:hover {
    color: #000 !important;
    border-color: #000 !important;
}

Hope this helps. Please let us know how it goes.

[philkopParticipant]

Thanks dudes! Looks great, and I learned something here.

I had a small issue a few weeks back that didn’t really bother me enough to pursue, but it was also fixed by adding the !important; tag to it.

As always, thanks for the quick and detailed service. I’ve recommended a few friends to X theme already, and one of them is about to get his second license. You guys rock!

E: While I have a post open, maybe you could explain how the animation in that icon is working exactly.

It looks like it plays the first time you view the item. Would there be a way to have this continue to play afterwards every 5 seconds or so?

[Paul RModerator]

Hi,

Thanks for recommending us.

It’s just a simple change of color and border color on mouse hover.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Author]

Posts