How to Create Colorful/Grayscale Hover Effect for Squarespace Summary Items
Implementing Colorful Hover Effects
“How to add colorful/grayscale hover effect on Squarespace summary item”, “CSS for adding hover effect on Squarespace summary item” or “Change the color of other images when we hover over one image in Squarespace summary block CSS”. Are you looking for a solution to any of these or similar to these search terms? We got you covered. Copy and paste the code from the below boxes and your clients couldn’t be more happy.
To implement colorful hover effects for Squarespace summary items, we'll use JavaScript to manipulate the grayscale filter on images. By default, all images will be displayed in color, but when a user hovers over an image, it will remain in color while the rest become grayscale.
CSS Styling
Begin by styling your summary items and thumbnails using CSS. You can swap the code in the following blocks to add a default grayscale filter on the summary items. It’ll create an effect that when someone will Hover Over one images, all the other images will become colorful.
.summary-item .summary-thumbnail {
filter: grayscale(0%);
}
.summary-item.active .summary-thumbnail {
filter: grayscale(100%);
transition: filter 0.5s; /* Adding transition for smooth effect */
}
JavaScript Code
Use JavaScript to add event listeners to each summary item. When a user hovers over an item, remove the grayscale filter from the hovered image and apply it to the rest of the images.
Path to add the code: Website > Home (or any page where you want this effect) > Settings (click on the gear icon in front of the page name, which appears when you hover over the page) > Advanced > Page Header Code Injections.
Just copy and page the code. You’ll not need to change anything. It doesn’t require any section IDs etc.
<script>
document.addEventListener("DOMContentLoaded", function() {
const summaryItems = document.querySelectorAll(".summary-item");
summaryItems.forEach(function(item) {
item.addEventListener("mouseenter", function() {
// Set all items to grayscale
summaryItems.forEach(function(item) {
item.classList.add("active");
});
// Set the hovered item to color
this.classList.remove("active");
});
item.addEventListener("mouseleave", function() {
// Reset all items to color
summaryItems.forEach(function(item) {
item.classList.remove("active");
});
});
});
});
</script>
In conclusion, adding colorful hover effects to your Squarespace summary items is a simple yet effective way to enhance the visual appeal and interactivity of your website. By following the steps outlined in this post, you can create engaging hover effects that captivate your audience and elevate your online presence. Start implementing these dynamic effects today to take your website to the next level!
Join our mailing list to get solutions to such coding problems.