Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 11, 2015 at 12:33 am #485641
    codemode

    Is it possible to have a custom image overlay on hover in place of the caption overlay using custom css?

    I’m using the image widget and would like to be able to do an image swap on hover.

    Any recommendations?

    Thanks

    • This topic was modified 9 years, 3 months ago by codemode.
    August 11, 2015 at 1:42 pm #485928
    Yigit

    Hey codemode!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: '';
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

    Best regards,
    Yigit

    August 11, 2015 at 8:34 pm #486177
    codemode

    Hi

    I’m guessing this code applies one custom image overlay to all rather than individual images? For example, I have 3 images – could I create 3 different image overlays – one for each upon hover?

    Thanks!

    August 11, 2015 at 8:37 pm #486180
    Yigit

    Hey!

    Yes, you are guessing right. Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your element a custom class and then change the code to following one 

    .your-custom-class .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: '';
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

    Cheers!
    Yigit

    August 12, 2015 at 2:33 am #486264
    codemode

    Tried it with the image element and the image does not swap. I added my custom class and custom path to the image but no luck. Am I missing anything?

    I’m looking to do this but without the code block. I’d prefer to use the image element.

    https://kriesi.at/support/topic/create-rollover-images/

    A plugin with some nice css or jq transitions would be cool, but I’ve only seen image to caption transition plugins – not image to image.

    • This reply was modified 9 years, 3 months ago by codemode.
    August 12, 2015 at 12:40 pm #486464
    Yigit

    Hey!

    The code i provided should change the icon on image overlay.
    To change image, i can only recommend you – https://kriesi.at/support/topic/create-rollover-images/#post-311892
    If that does not help, please feel free to request such feature here – https://kriesi.at/support/enfold-feature-requests/ or try finding a plugin. Unfortunately, i do not know any that i can recommend you.

    Regards,
    Yigit

    August 12, 2015 at 6:09 pm #486715
    codemode

    Using the rollover code from the link mentioned, how can I then create a link to an image/video (via the built-in lightbox), link to a page #target, or link to external site?

    Thank you!

    August 13, 2015 at 12:44 am #486870
    Yigit

    Hi!

    You can simply add image element to your page and link it to your image/video and it would open in lightbox by default

    Cheers!
    Yigit

    August 13, 2015 at 1:18 am #486872
    codemode

    Sorry, let me clarify…

    Using this code:

    <img onmouseover="this.src='path-to-mouse-over-image';" onmouseout="this.src='path-to-normal-image';" src="path-to-normal-image" alt="what-ever-you-like" />

    I figured out how to link by adding:

    onclick="javascript:window.location.href='path-to-url'; return false;"

    But how do I create the a link to an image or video via the default WP lightbox?
    (just like the image element allows, but in this case I’m using the custom code block).

    • This reply was modified 9 years, 3 months ago by codemode.
    August 19, 2015 at 12:26 pm #489983
    Yigit

    Hey!

    That is not easily possible and as i suggested earlier, your best option would be requesting feature here – https://kriesi.at/support/enfold-feature-requests/ or to hire a freelance developer for such customization.

    Cheers!
    Yigit

    August 19, 2015 at 8:44 pm #490388
    codemode

    Will do. Thank you.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Custom Image Overlay or Image Swap on Hover?’ is closed to new replies.