Hello
The image below is what I see on my 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:
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
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
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
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