Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 17, 2015 at 8:00 am #460580
    djshortkut

    I have quite a few images with captions that display on hover on my site (see example page). This works great on a computer but on a mobile device there is no way for the user to see the caption for each image since you can’t hover on a mobile device.

    – Is there a way to have it so that on a mobile device when the user touches the image, the image caption shows up, like it does on hover? Then when they touch it again it takes them to that link?

    – If that can’t be done (above) is there a way to always display the caption on mobile devices? (iPad & iPhone screen size)

    Thanks in advance!

    June 17, 2015 at 2:04 pm #460770
    Elliott

    Hey djshortkut!

    I don’t think that would be possible. Instead we can have the caption display always on mobiles like how you said. Drag two color sections to your page and duplicate the images and give the sections a custom ID. We can use CSS to hide one of the sections on mobile and vice versa.

    The images inside you can set the captions to display on hover in one of the sections and in the other set them to always display.

    Here is the CSS you would use.

    @media screen and (max-width: 767px) {
#section1 { display: none !important; }
#section2 { display: block !important; }
}
@media screen and (min-width: 767px) {
#section1 { display: block !important; }
#section2 { display: none !important; }
}

    And then play around with the 767px value to target all of the screen sizes you want.

    Regards,
    Elliott

    June 17, 2015 at 6:57 pm #460915
    djshortkut
    This reply has been marked as private.
    June 18, 2015 at 2:46 pm #461359
    Ismael

    Hi!

    You can use this to set the initial opacity of the captions:

    @media only screen and (max-width: 989px) {
.av-overlay-on-hover .av-image-caption-overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}}

    Remove browser cache then reload the page.

    Best regards,
    Ismael

    June 18, 2015 at 4:37 pm #461446
    djshortkut

    Awesome, you can close this thread.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Image Caption on Mobile Device’ is closed to new replies.