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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 11 months later...

Hi,

I used that code and it worked perfectly on desktop. Is there a way to remove the hover effect on mobile and have the text aways showing? 

In case that can not be done, I have a follow up question. Is there a way to add permanent text overlay over an image? Few of the images on my website are clickable and I want to have some text in the middle of the images. The problem with the traditional solution to that, adding a text block, is that the part where the text block sits becomes unclickable 😞

Link to comment
On 8/26/2023 at 9:47 AM, kenvelo said:

Hi,

I used that code and it worked perfectly on desktop. Is there a way to remove the hover effect on mobile and have the text aways showing? 

In case that can not be done, I have a follow up question. Is there a way to add permanent text overlay over an image? Few of the images on my website are clickable and I want to have some text in the middle of the images. The problem with the traditional solution to that, adding a text block, is that the part where the text block sits becomes unclickable 😞

Yes. We can remove hover on mobile. If you share link to page where you have problem, we can help easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.