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

Scale up hover effect - Need help!

Question

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

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0
/*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);
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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);
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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...