Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 16, 2016 at 9:52 am #632809
    elenapoliti

    Hi I need to add some text caption on single images. However I would like to have the following: on the desktop they should appear only on mouse hover. On the other side, when I look at it in responsive mode, I need the caption to be always visible, as the mouse hover doesn’t work in responsvie mode. How can I set the CSS to do that? I tried different solutions buyt they don’t work!

    May 17, 2016 at 5:49 am #633469
    Rikard

    Hi Elena,

    I’m not sure if there is an easy solution for that, but send us a link to your site and we’ll have a look at it.

    Thanks,
    Rikard

    May 17, 2016 at 8:38 am #633548
    elenapoliti

    I imagined it was hard, as it doesn’t seem to be controlled by CSS classes. However please give a look to this page

    IDP – accommodation and food

    The first two images have a text caption that displays on hover. However the text doesn’t appear on a mobile device with the touch screen. Hence I would like that on touch screens the text will be displayed always.

    Best regards

    Elena

    May 18, 2016 at 12:46 pm #634368
    elenapoliti

    Hi Rikard, did you have the chance to see the link I sent to you? Thanks

    Elena

    May 18, 2016 at 4:14 pm #634602
    Andy

    Hi,

    try this code in Quick CSS field:

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

    and adjust the media queries as needed (for screen size).

    Best regards,
    Andy

    May 18, 2016 at 4:21 pm #634616
    elenapoliti

    Thank you very much: that worked! However I am using a child theme. If I add your code to my own style.css (which would be very much preferable), it doesn’t. I have to add the code #top, but then the text caption appears on any screen size Do you have any suggestion?

    May 19, 2016 at 6:48 am #634975
    Rikard

    Hi,

    I’m not sure what you mean by that, it should work in a child theme as well. Did you try it in Quick CSS? You might need to use !important in your CSS like so: 

    @media only screen and (max-width: 1024px) {
.av-overlay-on-hover .av-image-caption-overlay {
opacity: 1 !important;
}}

    Best regards,
    Rikard

    May 19, 2016 at 8:37 am #635046
    elenapoliti

    Thank you very much: that worked perfectly!

    You can close the topic now.

    My compliments for your incredible theme!
    Elena

    May 19, 2016 at 2:12 pm #635190
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Managing text caption on images in responsive mode’ is closed to new replies.