Jump to content

How to add text/title to gallery grid image on hover AND caption to display under image on hover

Recommended Posts

Hi

I have added the code below to my portfolio page which allows me to have a caption display under the image on hover AND a description over the image on hover. I am now trying to replicate this on a gallery-grid-image, however nothing is working! I can get the caption to display under the image on hover, but can't get any text to display over the image at the same time. 

Code which works to add text over image when doing this on a portfolio page: (screenshot attached to show the effect I am looking for)

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

 

How do I apply this to a simple gallery grid image so I get the same effect? Whilst maintaining the caption hover under image at the same time?

Thanks!

Charlotte 

 

Screen Shot 2023-02-13 at 19.16.52.png

Edited by css_charlotte
Wrong image uploaded
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.