Jump to content

Adding hover text to projects

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

20 hours ago, graceface93 said:

Site URL: https://www.brightendesigns.com/gallery

I'm trying to add a hover text over the images on my projects page, but keeping the titles underneath. I want it to say "see more" when you hover over the image, but I still want the titles below the images. Is this possible??

Password for my website is Brighton

Try adding to Home > Design > Custom Css

section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .portfolio-grid-basic .grid-item .portfolio-text {
  position: absolute;
  width: 100%;
  padding: 0 10px;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .portfolio-grid-basic .grid-item .portfolio-text:after {
  content: 'See more'
}

section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .portfolio-grid-basic .grid-item:hover .portfolio-text {
  opacity: 1;
}
section[data-section-id="61dc8e4d2fb1e453c7c6598a"] .grid-item {
  position: relative;
}

Let me know how it works on your site

Support me by pressing ūüĎć if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.8f30258e3ab4f7109ff4f9292d311153.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 2/2/2022 at 3:07 AM, graceface93 said:

I'm just wondering if there's any way to keep the title, ie  "THE SWALLOW HOUSE", underneath, but add "See More" as a button on the photo

You mean

Initial: Image - Text under image

Hover: Image - Text Under Image - Button See more over image (button is clickable)

Is this right?

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
  • 4 months later...

Hi @tuanphan 

Just following up on this one as would love to know how to achieve the following:

Initial: Image

Hover: Text (portfolio title) under image - Text 'COMING SOON' (content) over image 

 

I have attached an image showing what I currently have. I have managed to create a grey overlay on hover, red border on hover and black text underneath on hover (no pointer events). However I need the red 'COMING SOON' to appear in the centre of the image on hover and not sit with the black project title. 

 

The code I have used for the 'COMING SOON' element is below: (the code for the grey hover, red border and black text is generic to the rest of the site so this code is separate to the below. The red 'COMING SOON' hover only applies to this one image, not all images). 

a.grid-item[href*="/palmbaybungalow"] .portfolio-text:before {
content: 'COMING SOON';
color: red;  
position: center !important;         
text-align: center !important;          
width: 100%;  
padding: 5; }

Any help would be greatly appreciated! 

Thank you, 
Charlotte 

Screen Shot 2022-06-30 at 13.27.28.png

Link to comment
19 hours ago, css_charlotte said:

Hi @tuanphan 

Just following up on this one as would love to know how to achieve the following:

Initial: Image

Hover: Text (portfolio title) under image - Text 'COMING SOON' (content) over image 

 

I have attached an image showing what I currently have. I have managed to create a grey overlay on hover, red border on hover and black text underneath on hover (no pointer events). However I need the red 'COMING SOON' to appear in the centre of the image on hover and not sit with the black project title. 

 

The code I have used for the 'COMING SOON' element is below: (the code for the grey hover, red border and black text is generic to the rest of the site so this code is separate to the below. The red 'COMING SOON' hover only applies to this one image, not all images). 

a.grid-item[href*="/palmbaybungalow"] .portfolio-text:before {
content: 'COMING SOON';
color: red;  
position: center !important;         
text-align: center !important;          
width: 100%;  
padding: 5; }

Any help would be greatly appreciated! 

Thank you, 
Charlotte 

Screen Shot 2022-06-30 at 13.27.28.png

What is page url?

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
  • 2 weeks later...
1 hour ago, css_charlotte said:

Hi @tuanphan

The page URL is: https://www.workbyline.co.uk/

Thank you!

Charlotte 

Use this code to add Coming Soon

a.grid-item[href*="/palmbaybungalow"]:before {
    content: "COMMING SOON";
    color: red !important;
    text-align: center !important;
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    opacity: 0;
}
a.grid-item[href*="/palmbaybungalow"]:hover:before {
    opacity: 1;
}

 

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

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.