Scale up hover effect - Need help!

Trying to give my "Stacked image layout blocks" a hover effect - having a issue with getting it to work

This is the code i´m currently using ->

/*HOVER MODE FOR SUMMARY BLOCKS*/
#scale-up .sqs-block-image .design-layout-stack .summary-item {
  transition: box-shadow .5s, transform .5s;
}
#scale-up .sqs-block-image .design-layout-stack .summary-item:hover {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

Here is a link to the website where i found the code 

https://thirtyeightvisuals.com/blog/hover-effect-summary-block-gallery-block-squarespace

/*HOVER MODE FOR SUMMARY BLOCKS*/
#scale-up .sqs-block-image .design-layout-stack {
  transition: box-shadow .5s, transform .5s;
}
#scale-up .sqs-block-image:hover .design-layout-stack {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

Doesn`t seem to be working 

Can you share link to your site?

link to site : elevated.no

password: berman123

change 

#scale-up to .homepage

Still can`t get it to work, can you paste the whole code? 

14 hours ago, ChristopherBerman said:

Still can`t get it to work, can you paste the whole code? 

 

I see it works here.

/*HOVER MODE FOR SUMMARY BLOCKS*/
.homepage .sqs-block-image .design-layout-stack {
  transition: box-shadow .5s, transform .5s;
}
.homepage .sqs-block-image:hover .design-layout-stack {
  box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

Thank you it works! - also would you be able to help me with my other post on gradients an section overlays? - angled sections

Hello @tuanphan,

I've tried your code for my carrousel summary blocks and it doesn't work.

Could you help me with this ?

My website : www.brondyhumphrey.com/expansion-2
pw: pure

18 hours ago, iJizzy1 said:

Hello @tuanphan,

I've tried your code for my carrousel summary blocks and it doesn't work.

Could you help me with this ?

My website : www.brondyhumphrey.com/expansion-2
pw: pure

It looks like your site has problem with multilanguage code.

When enter password >> it reload page with en.brondyhumphrey.com in browser address bar >  then appear password input again.

Hello @tuanphan , I desactivated the multilanguage code.

It is working now, you can access to my website.

On 8/5/2022 at 5:50 PM, iJizzy1 said:

Hello @tuanphan , I desactivated the multilanguage code.

It is working now, you can access to my website.

You mean effect: Hover summary images >> Make it bigger?

https://www.brondyhumphrey.com/expansion-2

Yes, this is what I meant.

On 8/10/2022 at 12:38 AM, iJizzy1 said:

Yes, this is what I meant.

Add to Design > Custom CSS

/* Summary hover */
.summary-item:hover img {
    transform: scale(1.3);
    transition: transform 0.2s ease;
}
.summary-thumbnail {
    overflow: hidden;
}

Hello @tuanphan

Thank you for your answer ! Unfortunately, it is the images which are affected not the blocks. I would like the an scale up hover effect on the block itself not the image.

Cheers.

On 8/11/2022 at 5:39 PM, iJizzy1 said:

Hello @tuanphan

Thank you for your answer ! Unfortunately, it is the images which are affected not the blocks. I would like the an scale up hover effect on the block itself not the image.

Cheers.

You can use this

/* Summary hover */
.summary-item:hover {
    transform: scale(1.3);
    transition: transform 0.2s ease;
}

Thank you, it is working perfectly now !

🥳