Masonry overlay effect on mobile without hover

Hi,

I have a masonry overlay effect on desktop like this https://leukosarchitecture.es/en/projects/ to have on hover a white background with title in black.

In mobile there is no hover so you always see the title in black, no white background. I would like to add that white background (a little more transparent, so you can see the photo behind) in mobile so the text is easier to read.

I tried the following code on quick css but there was no way to make it work.

@media only screen and (max-width: 767px) {
   .av-masonry-entry-content {
  content:'';
  position:absolute;
  background: rgba(255,255,255, 0.65)!important;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
}
}

This is the code for the desktop masonry that I currently have, if it helps you

/*CSS - Masonry, Hover, filtro por encima y texto */ 

#top .av-inner-masonry:before {
  content:'';
  position:absolute;
  background: rgba(0,0,0,.0)!important;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
}

#top .av-inner-masonry:hover:before {
  background: rgba(255,255,255, 0.85)!important;
  transition:all .5s cubic-bezier(0.63, 0.7, 0.55, 1.03);
}

• This topic was modified 1 year, 2 months ago by Xiscoj.