Jump to content

Trying to Create Image Grid w/ Hover


Mark Laurence
 Share

Recommended Posts

The page in question is Here

I'm going to have a dozen or so images that I want lined up grid-style. They'll all be sized the same. But, I also want to have the hover overlay that's currently there. 

CSS is currently: 
 

<!-- THUMBNAIL -->

<style>

.container {
	position: relative;
	width: 50%
}

.image {
	display: block;
	margin: 3px;
	width: 50%;
	height: auto;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3px;
	right: 0;
	height: 100%;
	width: 50%;
	opacity: 0;
	transition: .5s ease;
	background-color: #000000; 
}

.container:hover .overlay {
	opacity: 1;
}

.text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

</style>

HTML for each image is:

<div class="container">
		<a href="../images/thankyounotes/football_equipment.jpg" data-lightbox="kidswehelp" data-title=""><img id="football" src="../images/thankyounotes/football_equipment.jpg" class="image"></a>
			<div class="overlay">
				<div class="text">Testing This</div>
			</div>
		</div>

Thoughts? 
 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...