5 Fun CSS Hover Effects for Image Blocks
Bring another level of customization & interaction to your website design with these 5 CSS hover effects for image blocks.
Original post: https://www.ajmexperience.com/learn-p...
Want more fun image hover effects? Here are some of our favorite FREE plugins!
Slide up on hover
https://www.ghostplugins.com/steps/ws...
Enlarge photo on hover
https://www.ghostplugins.com/free-plu...
Tilt on hover
https://www.ghostplugins.com/free-plu...
——————
HERE’S THE CODE:
Remember to change the block ID in the CSS below.
Here’s how to find the block ID and here’s how to target it.
// add a drop shadow on hover //
#BLOCK-ID:hover { box-shadow: 0px 2px 5px rgba(0,0,0,.3) }
// zoom photo on hover //
#BLOCK-ID:hover img { transform: scale(1.1) !important;
transition: all ease-in-out 0.8s !important;
}
// grayscale on hover //
#BLOCK-ID:hover { filter: grayscale(100%); }
// colored border on hover //
#BLOCK-ID:hover { border: solid 2px #7cccbd; }
// change a photo on hover //
Okay, the Squarespace hover image change is the most complex! Just be sure to replace IMAGEFILEHERE with your custom files– watch the video above for further clarification :)
// this hides the photo on hover //
#BLOCK-ID:hover img {
visibility: hidden;
}
// this shows the new photo on hover //
#BLOCK-ID
div {
background-image: url(IMAGEFILEHERE);
background-size: cover;
background-repeat: no-repeat;
}
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)