Issue with Hover Effect on Images

Hi friends! I'm having an issue adding hover effects for images in the blog section. I was using this code to create blurry/darkening effect upon hovering over images:

/* Blog List - Hover Effect */
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.1s;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    position: relative !important;
    transform: unset !important;
}
.blog-basic-grid article:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.1s;
}

.blog-basic-grid .image-wrapper:after {
    content: "";
    background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px); transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.1s;
}

.blog-basic-grid article:hover .image-wrapper:after {
    opacity: 1;
    transition: all 0.2s;
}

.blog -basic-grid .image-wrapper {
    position: relative;
}

The blur effect shows up fine when I'm in the 'editing' mode (screenshot attached), but when I open the website from a different browser/different devices, the blurr effect doesn't appear. Please help me identify where the problem might be. Many thanks!

Can you share link to blog?

@tuanphan Sure! https://www.sandranam.me/work

Hi,

It shows fine to me. Windows/Chrome

Hi @tuanphan! Thank you so much for checking! It's so weird that I'm not seeing some changes I've made in the "editor" mode when I look at the website as a visitor on all my devices. 

Could you please help me create the same blurry/dark effect in the summary carousel here where it says "watch more": https://www.sandranam.me/work/squarespace-dream-it-idris-elba

I'd be extremely grateful!!

24 minutes ago, maya_m said:

please help me create the same blurry/dark effect in the summary carousel

It'd be the same/similar code you have for the blog items, but the class names would be different. You can use developer tools (CTLR + SHIFT + C) or right click and inspect element to figure out what that should be. If you're not familiar with code, it may be difficult to tell what class to use. Let me know if you need help!

@AlexSan I'm struggling a bit because I'm unfamiliar with the code. If you could help me, I'd be very grateful!!

@maya_m,

Think your original code may need some tweaking as well. Text isn't fading in when you hover, and there's some repeated css.

Here is the code for the summary carousel, let me know if the following works:

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
	position: relative !important;
    transform: unset !important;
}

.summary-title {
	text-align: center;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	opacity: 0;
}

.sqs-block-summary-v2:hover .summary-title {
	opacity: 1;
	transition: all 0.1s;
}

I haven't included the blurry/darken effect. Should move the text to the center of the image and show it on hover.

@AlexSan Thank you! I've attached the screen recording of how it worked - the titles of each project show up simultaneously when I hover on one thumbnail. 

@maya_m,

I see. The site is private again, but I can take a look tomorrow morning and update the css. In the meantime, give this a try:

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}

.summary-title {
  text-align: center;
  color: white !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
}

.sqs-block-summary-v2:hover .summary-title:after {
  opacity: 1;
  transition: all 0.1s;
}

Thank you so much for trying to help! This one hasn't worked, but I've managed to create a blur/darken effect on hover with the code below: 

.summary-thumbnail-outer-container > a:after {
    content: "";
    background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px); transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.1s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
  transition: all 0.2s;
}

The only thing left is to make the titles reveal on hover. Trying different codes, but all failed 😞

Link & pass to the website: 

https://www.sandranam.me

7u5PY6B6C

@maya_m,

Did you want the titles to appear on the image, or appear beneath them on hover?

If it's on the image, use the following code:

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}

.summary-content {
  text-align: center;
  color: white !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: all 0.2s;
}

.summary-thumbnail-outer-container:hover + .summary-content{
  opacity: 1;
  transition: all 0.2s;
}

If you want it to fade in on hover underneath the image:

.summary-content {
  opacity: 0;
  transition: all 0.2s;
}

.summary-thumbnail-outer-container:hover + .summary-content {
  opacity: 1;
  transition: all 0.2s;
}

Let me know if the fade in on hover works as expected!

@AlexSan  Thank you so much for the code, Alex! I'd love the title to show up in the center. Attached is the screen recording of how it worked: the titles stuck on the thumbnail. Is there a chance we could fix it?

@maya_m,

Hmm that's weird. They shouldn't be visible until you hover. Could try adding !important to opacity?

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}

.summary-content {
  text-align: center;
  color: white !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0 !important;
  transition: all 0.2s;
}

.summary-thumbnail-outer-container:hover + .summary-content{
  opacity: 1 !important;
  transition: all 0.2s;
}

Let's see if that works.

Didn't work, so weird! 

@tuanphan Could you possibly take a moment to take a look at the code? We've been trying to figure out why it's not working. 

On 1/5/2024 at 11:33 PM, maya_m said:

@tuanphan Could you possibly take a moment to take a look at the code? We've been trying to figure out why it's not working. 

It already show title on hover to me

@tuanphan I'd like the title to show up simultaneously with the blurred/darkened filter like here: https://www.sandranam.me/work

Here's the code I've been using:

// HOVER ON SUMMARY BLOG //
.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  font-size: 24px!important;
  color: white!important;
  font-weight: regular!important;
  font-family:'orpheus pro'!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0!important;
    transition: all 1s!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content:hover {
    opacity: 1!important;
    transition: all 0.1s;
}
  
.summary-thumbnail-outer-container > a:after {
  content: "";
  background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px);
  transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.1s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
  transition: all 0.1s;
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}