Adding Button on Hover to all items in gallery grid

Jreichenstein · February 9, 2021

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 :)

Jreichenstein · February 9, 2021

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 February 9, 2021 by Jreichenstein

Adding Button on Hover to all items in gallery grid

Recommended Posts

Jreichenstein

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Jreichenstein

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources