Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 24, 2014 at 2:05 pm #356763
    eriktobben

    Hi!

    I have two images on a page, and I don’t want the hover effect on these two images. The markup is:

    <img class="aligncenter" src="http://url.com/wp-content/uploads/2014/10/last_ned_pdf_250x300pxl.png" alt="" width="250px" height="300px" />

    How can I deactivate the hover effect on only this code/image?

    Also, is there a way to use the Image Element in Avia Layout Builder to display Retina graphics?

    November 24, 2014 at 2:08 pm #356773
    Yigit

    Hi eriktobben!

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

    .image-overlay { display: none !important; }

    You can upload your images in higher resolution and they should display just fine on retina displayed devices

    Cheers!
    Yigit

    November 24, 2014 at 3:09 pm #356821
    eriktobben

    Thanks for the code! But doesnt this code deactivate the overlay globally? I just want to deactivate it on two images.

    I’ve tried that, but the “Media Size” dropdown does not have an size for x2..

    November 24, 2014 at 3:19 pm #356831
    Yigit

    Hi!

    1- 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 image elements a custom CSS class and then change the code to following one

    .your-custom-class .image-overlay { display: none !important; }

    2- Can you post the link to your page where you have retina image?

    Cheers!
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.