Jump to content

Image + text Overlay Hover Effect

Recommended Posts

Site URL: https://www.azulstudio.co.uk/

Hello!

my site URL is https://www.azulstudio.co.uk

I am trying to add the colour + text overlay effect when hovering over the images on the "work" section.

For example, when hovering over the first picture on the right of "WORK" I would like it to be covered with a solid color rgb (100,39,39) and a title to appear (in this case "Decorex 2021).

I have tried several tutorials but none of them are working, as I feel that I am not targeting the specific image correctly.

Any help is very much appreciated!

thank you!

Mariana

image.thumb.png.44228fb9ab4bf3b28023aee5d1796200.png

Link to comment

Try adding this to Design > Custom CSS. If it works, I will send quick guide for other images

div#block-yui_3_17_2_1_1661175829962_534783 {
.sqs-image-content:after {
    content: "Decorex 2021";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    z-index: 99999;
    font-size: 30px;
    opacity: 0;
    background-color: transparent;
    transition: all 0.3s;
	pointer-events: none;
}
.sqs-image-content {
    position: relative;
}
.sqs-image-content:before {
    content: "";
    background-color: rgba(100,39,39,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    opacity: 0;
    transition: all 0.3s;
	pointer-events: none;
}
&:hover .sqs-image-content:before, &:hover .sqs-image-content:after{
    opacity: 1;
    transition: all 0.3s;
}}

image.thumb.png.3b03dfbf9fe28f05609750b5a6adc580.png

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
18 hours ago, MarianaGR said:

Hi again!

I just realized that the image link does not longer work when the hover effect is applied.

Is there a way to solve that?

thank you!

M

Updated the code. You can check again.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
38 minutes ago, MarianaGR said:

is there a way for the hover effect to work on mobiles?

Mobile devices don't have a hover state because there is no pointer device like a mouse. It's best to avoid using hover effects now that mobile devices represent more than 50% of site traffic.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.