-
AuthorPosts
-
December 21, 2014 at 7:28 am #371215
How do I give my images an overlay icon circle (Like blog featured images).
I think it would look awesome in the menu for an “About” menu with employee pictures.
December 21, 2014 at 7:28 pm #371312Hi SeizeTheBeat!
You can use our image shortcode for that. The overlay icon will be added.
Best regards,
ElliottDecember 21, 2014 at 9:47 pm #371340Oh! I didn’t even realize that.
One more quick question…
Is there any way to change the icon on the overlay? Not on ALL the images, but is there a way to define certain images to have a difference icon on the overlay?
(I have custom CSS classes activated on all shortcodes, and I figure there must be a way to do it using Quick CSS and then a CSS Class)
- This reply was modified 10 years ago by SeizeTheBeat.
December 22, 2014 at 2:29 am #371391Hey!
Try to add custom css class then use the hover state on the Quick CSS:
.custom-class:hover { STYLE HERE }
If you can give us a test page, we’ll check it. A screenshot will help.
Best regards,
IsmaelDecember 22, 2014 at 4:52 am #371426Forgive me but I am extremely noobish when it comes to that stuff.
What exactly do you mean? You’d have to explain it in simple terms.
December 22, 2014 at 5:25 pm #371598Hi!
Can you please give a custom CSS class to one of your image element which you wished had a different overlay image and then post the link to your page and point out the image?
Cheers!
YigitDecember 23, 2014 at 6:41 pm #372190I am just testing this out for now, but I went ahead and did that.
The image is on this page (It’s the only image on it): http://www.priorityev.info/work-page/
The CSS class I assigned to it is “kmp-paris”.
December 23, 2014 at 7:22 pm #372206Hi!
Next you would upload your icon to your server and then add this to your custom CSS.
.kmp-paris .image-overlay-inside { background: url("URL to your icon") !important; content: "" !important; } .kmp-paris .image-overlay-inside:before { content: "" !important; }
And then replace “URL to your icon” with the URL to your icon image.
Cheers!
ElliottDecember 23, 2014 at 11:09 pm #372306What is the icon being pulled from now? Isn’t it from an icon font?
I thought I’d just change what the icon was. Rather than do entire image for it.
December 23, 2014 at 11:28 pm #372318Hey!
Try this.
.my_class .image-overlay .image-overlay-inside:before{content:"\E870" !important; font-family: 'entypo-fontello' !important; }
Regards,
ElliottJanuary 5, 2015 at 12:44 am #374829Worked like a charm! Thanks!
-
AuthorPosts
- The topic ‘Image Link Overlay’ is closed to new replies.