Remove hover effects on mobile

Site URL: https://eagle-pear-f8dr.squarespace.com/packages

Hello

I've got some css hover effects on 3 images that I would like to disable so that the caption shows on mobile. Currently requiring a touch to display on mobile which isn't overly intuitive.

https://eagle-pear-f8dr.squarespace.com/packages this is the url and the password is emmac123 to view the site.

Thanks

On 2/16/2021 at 9:20 AM, kellicox90 said:

Site URL: https://eagle-pear-f8dr.squarespace.com/packages

Hello

I've got some css hover effects on 3 images that I would like to disable so that the caption shows on mobile. Currently requiring a touch to display on mobile which isn't overly intuitive.

https://eagle-pear-f8dr.squarespace.com/packages this is the url and the password is emmac123 to view the site.

Thanks

There is a overlay when hover, how do you want it to be displayed?

@media only screen and (max-width: 640px) {
	.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {
      opacity: 1 !important;
      visibility: visible !important;
      position: relative !important;
    } 
}

13 hours ago, bangank36 said:

There is a overlay when hover, how do you want it to be displayed?

@media only screen and (max-width: 640px) {
	.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay-hover .image-caption-wrapper {
      opacity: 1 !important;
      visibility: visible !important;
      position: relative !important;
    } 
}

 

Oh Thank you SO SO MUCH!!!! This works perfectly!

Is there any way to change this to work for Gallery sections? 

This is the current code I have, I am new to this and tried applying the code previously given in the forum to the gallery blocks but couldn't figure it out. 

Website is http://abouhashish.co

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); 
  height: 100%;
  padding: 0;
  opacity: 0;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; 
  justify-content: center; 
}
.gallery-grid .gallery-caption-content {
  font-size: 7rem !important; 
  color: white;
  padding: 1vw;
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;  transition: 0.1s
}
.gallery-caption-grid-masonry {

  max-width: unset;
}
@media only screen and (max-width: 640px) {
	.gallery-grid .gallery-caption-content:not(.grid-gallery-v2).layout-caption-overlay-hover gallery-caption-content {
      opacity: 1 !important;
      visibility: visible !important;
      position: relative !important;
    } 
}

On 4/7/2023 at 1:59 PM, abou said:

Is there any way to change this to work for Gallery sections? 

This is the current code I have, I am new to this and tried applying the code previously given in the forum to the gallery blocks but couldn't figure it out. 

Website is http://abouhashish.co

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); 
  height: 100%;
  padding: 0;
  opacity: 0;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; 
  justify-content: center; 
}
.gallery-grid .gallery-caption-content {
  font-size: 7rem !important; 
  color: white;
  padding: 1vw;
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;  transition: 0.1s
}
.gallery-caption-grid-masonry {

  max-width: unset;
}
@media only screen and (max-width: 640px) {
	.gallery-grid .gallery-caption-content:not(.grid-gallery-v2).layout-caption-overlay-hover gallery-caption-content {
      opacity: 1 !important;
      visibility: visible !important;
      position: relative !important;
    } 
}

 

Can you share link to page where you use Gallery Block?

On 4/8/2023 at 2:21 AM, tuanphan said:

Can you share link to page where you use Gallery Block?

https://www.abouhashish.co/

it's the bottom of the home page, the hats, hoodies, sweaters 

On 4/10/2023 at 5:24 AM, abou said:

https://www.abouhashish.co/

it's the bottom of the home page, the hats, hoodies, sweaters 

I see you figured it out?

On 4/12/2023 at 2:06 AM, tuanphan said:

I see you figured it out?

Yes, Thank you. 

Hello,

Is there any way to make it so gallery captions always are apparent in mobile view, but remain on hover in desktop view? As you can see in the screenshot, my mouse is hovering over the image with the caption visible. For mobile view, I want the captions to always be visible in this manner. 

This is the code I'm currently using:

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center vertically 
  justify-content: center; // center horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 1.2rem !important; // caption font size
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}

On 5/24/2023 at 5:27 AM, jnmillre said:

Hello,

 

Is there any way to make it so gallery captions always are apparent in mobile view, but remain on hover in desktop view? As you can see in the screenshot, my mouse is hovering over the image with the caption visible. For mobile view, I want the captions to always be visible in this manner. 

This is the code I'm currently using:

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center vertically 
  justify-content: center; // center horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 1.2rem !important; // caption font size
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}

Change your code to this new code

@media screen and (min-width:992px) {
.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center vertically 
  justify-content: center; // center horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 1.2rem !important; // caption font size
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}
}

On 5/28/2023 at 1:32 AM, tuanphan said:

Change your code to this new code

@media screen and (min-width:992px) {
.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center vertically 
  justify-content: center; // center horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 1.2rem !important; // caption font size
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}
}

Thank you! What alterations can I make to the code that center the captions on mobile view?