Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 21, 2014 at 7:28 am #371215
    SeizeTheBeat

    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 #371312
    Elliott

    Hi SeizeTheBeat!

    You can use our image shortcode for that. The overlay icon will be added.

    Best regards,
    Elliott

    December 21, 2014 at 9:47 pm #371340
    SeizeTheBeat

    Oh! 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 9 years, 11 months ago by SeizeTheBeat.
    December 22, 2014 at 2:29 am #371391
    Ismael

    Hey!

    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,
    Ismael

    December 22, 2014 at 4:52 am #371426
    SeizeTheBeat

    Forgive 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 #371598
    Yigit

    Hi!

    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!
    Yigit

    December 23, 2014 at 6:41 pm #372190
    SeizeTheBeat

    I 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 #372206
    Elliott

    Hi!

    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!
    Elliott

    December 23, 2014 at 11:09 pm #372306
    SeizeTheBeat

    What 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 #372318
    Elliott

    Hey!

    Try this.

    .my_class .image-overlay .image-overlay-inside:before{content:"\E870" !important; font-family: 'entypo-fontello' !important; }

    Regards,
    Elliott

    January 5, 2015 at 12:44 am #374829
    SeizeTheBeat

    Worked like a charm! Thanks!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Image Link Overlay’ is closed to new replies.