Jump to content

Adding Button on Hover to all items in gallery grid

Go to solution Solved by Jreichenstein,

Recommended Posts

I have a gallery grid of images that I'd like to add a "Learn More" button on hover but still displaying the image title below it as the caption. The button can be the exact same for all items since it just has to look like a button since I can use the click-through link on the image for the actual functionality. Any help is appreciated :)

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

For anyone curious, this is the code I used!

 

.image-slide-anchor:hover{
	cursor:pointer;
  }
.image-slide-anchor:hover::before {
	display: block;
	position: absolute;
	content: "Read Bio";
	background: #52c2c8;
	color: #fff;
	padding: .75rem;
	z-index:999999;
  	top:40%;
	left:33%;
}

 

Edited by Jreichenstein
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.