Jump to content

Display Text Over Image Hover

Recommended Posts

I'm looking for a way to make it possible to display text over an image when the person hovers over it. I have tried looking for solutions online, but all the ones I found either used the old editor, or worked by adjust transparency levels, which wouldn't work in my case as the images have transparent backgrounds. So how would I do this?

Link to comment
  • Replies 7
  • Views 334
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

@avrona To display text over an image on hover, you can add the code below under Website > Pages > Website Tools > Custom CSS

.fe-block-ec29dcfc91080366c3d6 .sqs-block-image .fluid-image-container::before {
    content: "Text on image hover";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    padding: 10px 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
.fe-block-ec29dcfc91080366c3d6 .sqs-block-image .fluid-image-container:hover::before {
    opacity: 1;
}

You didn't specify which image on your site. The code is intended to display text on hover over the first image, located to the right of "The Future of Online Content" text block on your About page.

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
On 7/6/2024 at 6:27 AM, Lesum said:

@avrona To display text over an image on hover, you can add the code below under Website > Pages > Website Tools > Custom CSS

.fe-block-ec29dcfc91080366c3d6 .sqs-block-image .fluid-image-container::before {
    content: "Text on image hover";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    padding: 10px 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
.fe-block-ec29dcfc91080366c3d6 .sqs-block-image .fluid-image-container:hover::before {
    opacity: 1;
}

You didn't specify which image on your site. The code is intended to display text on hover over the first image, located to the right of "The Future of Online Content" text block on your About page.

I want this for all of the client logos on that page, with each image displaying different text when hovering over it.

Link to comment

use this code 

.sqs-block-image:hover .sqs-block-content {
    opacity: 1;
    visibility: visible;
}

.sqs-block-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8); /* Adjust as needed */
    color: #fff; /* Text color */
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1;
}

 

LoftyDevs - Squarespace Experts

email.png
Connect - info@loftydevs.com 
website.png
Website - loftydevs.com
address.png
Ahmedabad, India
 
 
 
 
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.