Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #517243

    Hello

    The image below is what I see on my iPad:
    Ipad

    As you can see the image is hidden with the title, so I tried this:

    .avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content {opacity: 0.6 !important; filter:alpha(opacity=60) !important;}
    

    It works on desktop, I get this:
    Desktop

    But it do nothing on my iPad, the title background still white with no 60% opacity…

    How can I make this title background color to be transparent at 60 % on my iPad?

    PS: (When I looked at the same page on my mobile (iPhone) it’s not all the same behavior, the title goes below the image, and it’s good.)

    Thanks

    #517860

    Hey pako69,

    Are you trying to change it on hover only? I see some hover selectors in your code and there is no hover state on touch screens. Please post a link to the site so that we can have a closer look.

    Thanks,
    Rikard

    #519804

    Hello

    The site is http://www.domodeco.fr
    You will see the things I’m talking at the left bottom of the homepage, block named “Design trotter”.

    “I see some hover selectors in your code”
    > this is not my code, but yours…

    If there is no hover for that : how can I:
    – hide it ?
    – or make it semi-tranparent?

    thanks

    #521417

    Hey!

    The opacity is set to 70% initially. You can change that with this:

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
        opacity: 1;
    }

    If you want to prevent the caption from covering the masonry items, adjust the height with this:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
        padding-bottom: 150%;
    }

    Use css media queries to adjust the property on different screen sizes.

    Best regards,
    Ismael

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