Image Poster Gradient On Hover

Install Steps

Image Poster Gradient On Hover

Submitted by Porter Pro Media Works with all template families


Step One

Add an Image Block with the Poster Design Style to the page you’d like your image on. When done, save the page.


Step Two

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Three

Copy and paste the code below into the Custom CSS Editor box.

// Gradient Overlay on Poster Image //

.image-block-v2:before { 
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;  
opacity: 0; }

.image-block-v2:hover:before {
background: -webkit-linear-gradient(to top, #F07C63, #E45372);
background: linear-gradient(to top, #F07C63, #E45372); 0%,rgba(0,0,0,1) 100%);
opacity: .55;
transition: all .5s ease-in-out; 

Step Three

Change the background color values #F07C63 and #E45372 to the color codes of your choice.

Make sure you do not have an overlay on the image within Site Styles already. If you do, remove it.

Save and refresh the page. 👍

Moov Labs