Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 17, 2019 at 5:41 pm #1092084
    Nancy

    Hello!

    I couldn’t find anything on this.

    Basically, I want an image to display certain text with a 0.5 overlay on the image. BUT when you hover over the image the 0.5 overlay remains BUT the text is different.

    Here is a link to a website [ https://www.glenivy.com/ ] that does it. It is under their “WHAT’S HAPPENING” Section.

    April 17, 2019 at 6:06 pm #1092091
    Nancy

    I tried the documentation “image swap with another on hover” https://kriesi.at/documentation/enfold/image/

    But, it swaps out the SAME image for all images and I’d like a different swapped image per image.

    April 20, 2019 at 8:57 pm #1092969
    Basilis

    Hi,

    Where is the place you are using it?

    Best regards,
    Basilis

    April 22, 2019 at 4:54 pm #1093367
    Nancy

    I am trying to use it on my website: familyrich.com

    April 22, 2019 at 4:55 pm #1093368
    Nancy

    I haven’t used it yet because IDK If it can be done.

    April 23, 2019 at 7:00 am #1093527
    Ismael

    Hi,

    Thanks for the update.

    Turn on the custom css class attribute field so that you can specify a different class selector for each image element.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    April 23, 2019 at 3:59 pm #1093682
    Nancy

    Hey! Thanks for your help, but it still did not work.

    I turned on the CSS class attribute.

    I then entered this code into the CSS for that image (I used my own image url), also, I left the ALWAYS DISPLAY CAPTION on the settings:

    .av-image-caption-overlay {
    background-position: 50% 50%;
    }
    .av-image-caption-overlay:hover {
    background-size: contain;
    background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
    background-color: rgba(255,255,255,0.5);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transform: all .0s;
    }

    Here is the page it is on https://familyrich.com/igm.

    Here is the URL to the image that it should swap to for the 1st image: https://familyrich.com/wp-content/uploads/2018/02/GC-LUV-1.jpg

    The second image should swap to this one: https://familyrich.com/wp-content/uploads/2017/08/Free-Shipping-over-100.jpg

    • This reply was modified 5 years, 4 months ago by Nancy.
    April 24, 2019 at 3:28 pm #1094019
    Ismael

    Hi,

    Thanks for the update.

    Did you apply a custom css class attribute to the image element after enabling the custom css class field? What is it? Please post the login details in the private field so that we can check the page directly.

    Best regards,
    Ismael

    April 24, 2019 at 3:42 pm #1094026
    Nancy
    This reply has been marked as private.
    April 25, 2019 at 4:14 am #1094277
    Ismael

    Hi,

    Thanks for the update.

    You should put that css code in the Quick CSS field. We applied a custom css class attribute to the images, “img-hover-custom-a” and “img-hover-custom-b” respectively, then modified the css code a bit.

    .img-hover-custom-a .av-image-caption-overlay { background-position: 50% 50%; } 

.img-hover-custom-a .av-image-caption-overlay:hover { background-size: contain; background-image: url(https://familyrich.com/wp-content/uploads/2018/02/GC-LUV-1.jpg); background-color: rgba(255,255,255,0.5); background-repeat: no-repeat; background-position: 50% 50%; transform: all .0s; }

.img-hover-custom-b .av-image-caption-overlay { background-position: 50% 50%; } 

.img-hover-custom-b .av-image-caption-overlay:hover { background-size: contain; background-image: url(https://familyrich.com/wp-content/uploads/2017/08/Free-Shipping-over-100.jpg); background-color: rgba(255,255,255,0.5); background-repeat: no-repeat; background-position: 50% 50%; transform: all .0s; }

    Best regards,
    Ismael

    April 25, 2019 at 9:12 pm #1094543
    Nancy

    That works! I was under the impression that the CSS code went in the CSS class option in the image. And the code you provided was a little different than the one on the documentation. Thank you ! I really appreciate your help!

    April 29, 2019 at 2:58 am #1095137
    Nikko

    Hi BeyondMS,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Image with Caption (always displaying) But would like to have on hover…’ is closed to new replies.