Different hover/image overlay icons?? - Support | Kriesi.at

Tagged: enfold, font icon, hover, hover effect, image overlay

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 12, 2014 at 10:39 pm #208727

jtree5757
Participant

Is it possible to have a different image overlay text/icon font for different content.

For example, I have products that I would like to have a specific icon, like a magnifying glass.
But I also have pics that lead to a blog post that shouldn’t have the magnifying glass. I would rather have it be an arrow or something else.

Is this possible?

January 13, 2014 at 3:21 am #208776

Yigit
Keymaster

Hey jtree5757!

Please see Ismael’s post here https://kriesi.at/support/topic/rollover-disc-arrow-replacement-part-2/#post-121206

Regards,
Yigit

January 13, 2014 at 3:30 am #208780
jtree5757
Participant
I’m still a little confused. Maybe you can clarify..
```
	.image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }
	.image-overlay.overlay-type-extern .image-overlay-inside:before{content:"\E832";}
	.image-overlay.overlay-type-video .image-overlay-inside:before{content:"\E897";}
```
This is the only code that I found in the base.css that references font icons.

Do you mind explaining the differences between the three for us please?

Not sure how this will change the rollover icon for my products and regular images not related to my products. It seems like they are connected as they are classified as the same type in the above css. Sorry if I’m just misunderstanding.

Thanks.
January 13, 2014 at 8:52 am #208811
Dude
Participant
Hi!

You can use the class of the surrounding div to change the content. I.e. if you want to use a different icon for product images use
```
.single-product-main-image .image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }
```
and this rule will overwrite the default icon.

The difference between the three css code lines is just the icon. \E869 is the default icon, \E832 is the icon for external links and \E897 is the video icon.

Regards,
Peter
Author

Posts