Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Image Poster Block Hover


MakingWaves

Question

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;
}
}

 

Screenshot 2021-02-05 at 16.01.37.png

Screenshot 2021-02-05 at 16.01.46.png

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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; } .desig

Posted Images

2 answers to this question

Recommended Posts

  • 0

Looks ugly on desktop..

image.thumb.png.f0f5a32029af3a493a171f052db24adf.png

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;
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...