Image Poster Block Hover

Site URL: https://prism-swan-send.squarespace.com/home

I'm using this code to display a hover colour and text on image poster blocks for desktop only, but for some reason the text is still displaying on mobile. Can anyone help please? TIA

https://prism-swan-send.squarespace.com/home

p/w interiors

//*Image Poster Block Hover Over*//
@media only screen and (min-width: 834px) {

.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.5s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:#787157;
}
}

Looks ugly on desktop..

Try this new code

/* Image poster hover */
.design-layout-poster .image-card-wrapper {
  visibility: hidden;
  opacity: 0;
  transition-duration: 0.5s;
}

.design-layout-poster:hover .image-card-wrapper {
  visibility: visible;
  opacity: 1;
  background-color:#787157;
}

Yeh, I was conscious of that. Your code is SOOO much better, thanks a million Tuan, as ever! 🙂