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

Zoom in hover effect on homepage


MarissaG

Question

  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0

Add to Design > Custom CSS

/* homepage image effect */
body.homepage .image-block img {
    transition: all 0.2s;
}
body.homepage .image-block:hover img {
    transform: scale(1.2);
    transition: all 0.2s;
}
body.homepage .image-block {
    overflow: hidden;
}

 

Link to post
  • 0

I added the code and it works great! But I realized it's applying the hover to the logos on the homepage and I don't want it to do that. Is there any way to differentiate it so that the hover is only on the project links?

Thanks in advance!

Link to post
  • 0

Try new code

/* homepage image effect */
div#page-section-602229b710c48c03e7757b96>.row .image-block img {
    transition: all 0.2s;
}
div#page-section-602229b710c48c03e7757b96>.row .image-block:hover img {
    transform: scale(1.2);
    transition: all 0.2s;
}
div#page-section-602229b710c48c03e7757b96>.row .image-block {
    overflow: hidden;
}

 

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