Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 20, 2016 at 12:02 am #726355
    efletcher

    Hi,

    I have a set of images which are currently set to have a caption appear on hover only. This works great on a desktop but the captions don’t show on a mobile device. Is there a simple way I can set the images to show the caption and overlay permanently on mobile devices?

    Many Thanks
    Emma

    December 22, 2016 at 6:27 am #727395
    Ismael

    Hey Emma,

    Thank you for using Enfold.

    Please add this in the Quick CSS field.

    @media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay {
      opacity: 1;
      filter: alpha(opacity=100);
  }
}

    Best regards,
    Ismael

    January 9, 2017 at 8:05 pm #731263
    initiatecreate

    Hi Ismael,
    I also have a set of images which are currently set to have a caption appear on hover only but would like to display the caption permanently on mobile but I would like to HIDE the overlay on mobiles too – please could you advise of the css for this?

    Many Thanks

    Sarah

    January 10, 2017 at 7:14 am #731408
    Rikard

    Hi Sarah,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    January 10, 2017 at 4:06 pm #731599
    initiatecreate

    Hi Rikard,
    The site is not live yet and cannot be viewed by the public as I have mojo under construction plugin installed, I can add your IP though which will enable you to view? The css that Ismael provided in this post (pasted below) works for part of what I require but I don’t want the overlay to be visible when viewed on mobile, only the text caption.

    @media only screen and (max-width: 989px) {
    /* Add your Mobile Styles here */
    .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    }
    }

    So basically, my current image settings are to display just the image and then on hover a caption and semi-transparent overlay will appear. But on touchscreen/mobile I would like the text to be displayed all of the time on the image but NOT with the overlay. As I say, the CSS that Ismael provided works but it includes the semi-transparent overlay which makes the image look faded.

    Does this make sense?

    Thanks Sarah

    January 14, 2017 at 6:17 am #733452
    Ismael

    Hi,

    Thank you for the update. Please add this css code inside the css media query that we created before.

    .av-caption-image-overlay-bg {
    background-color: transparent !important;
    opacity: 0 !important;
}

    This code will remove the background color of the overlay but it won’t affect the actual caption.

    Best regards,
    Ismael

    January 17, 2017 at 12:25 pm #734667
    initiatecreate

    Thanks so much Ismael, that worked perfectly! :-)

    January 18, 2017 at 5:04 am #735094
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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