Animated Image Grid Layout HTML CSS

Hey, Pixels! In this tutorial, I’m going to show you how to code an Animated Image Grid Layout that will look awesome on any portfolio website. This is a spin on one of my most loved tutorials: Responsive Animated Image Grid. In this tutorial, we’re going to be using HTML and the latest in CSS, which include the infamous CSS Grid.

The HTML

First, create a section with the class name xop-section. Within the section, create a div with the class xop-wrapper and another div with the class name
xop-container. Both div’s will help position and contain our animated portfolio image grid.



Now, we’re going to code our images within the image grid. First, we’re going to use the anchor tag with the class name project and add a hyperlink placeholder by using the hash # symbol. Within the figure tag, we’re going to add our first image. Be sure to use the alt="" attribute to make your image accessible.



Below the image, we’re going to add a figcaption, a div and then we’re going to add a title for the project and paragraph with the class .cta. This paragraph will be revealed when a user hovers over a portfolio image.



Now that we have the basic structure of our image, all you need to do is duplicate the entire .project code snippet six more times and update the images, alt text and title accordingly.

That’s all for the HTML. Now, let’s head on over to our CSS file.

The CSS

All the magic happens in our CSS file. As you can see, I’ve already imported my Google Font for this project (feel free to use any font you like). I like to code mobile-first, so the following styles will be what our image grid looks like on a smaller screen and then, how it looks on a larger browser window.

First, I’m going to use a light background color.

I’ve also added some basic styles to the main section.


body {
	background: #f0f0f0;
}
.xop-section {
	font-family: 'Maven Pro', sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.3;
    margin: 0 0 4em;
}

In our HTML, we wrapped the portfolio images within a class named .project. I want to turn our anchor into a block level element, so I’m just going to use the display: block declaration and add a margin to the top and bottom of each project in our grid. I also removed some of the default margin and padding from the figure tag.


.project {
    display: block;
	width: 100%;
	text-decoration: none;
	margin: 1em 0;
    cursor: pointer;
}
figure {
	margin: 0;
	padding: 0;
}

Now for the next few css rules, I will be adding some basic styles to the project img, figcaption, h3 and .cta.

For the project image, note that I’m using the declaration object-fit:cover. This is perfect because it’s going to preserve the aspect ratio of the image.


.project figure img {
	width: 100%;
	display: block;
	object-fit: cover;
	height: 300px;
}
.project figcaption {
	padding: 1em;
	background: #966116;
	color: #fff;
}
.project h3 {
	color: white;
	margin: 0;
}
.cta {
	margin: .5em 0;
}

For the .cta, I’ve also added a font awesome icon just to further emphasize that there’s more to see when the user clicks the image.


.cta:after {
	content: '\f061';
	font-family: "Font Awesome 5 Free";
	display: inline-flex;
	margin: 0 0 .5em .5em;
}

Now that we’ve styled our grid for smaller screens, we can now add some styles for larger screens.

@media Rule

First, we’re going to add an @media rule for screens larger than 960px. Within this rule, let’s first center our wrapper and give it a max-width of 960px.


@media screen and (min-width: 960px) {
	.xop-wrapper {
		max-width: 960px;
		margin: 0 auto;
	}
}

Now, we’re going to select our main container and use the amazing CSS grid. First, I’m going to use the display: grid declaration. Then, I’m going to use the grid-template-columns property. I want to use the repeat function to repeat our 1fr value three times. I’m also going to add a grid gap that’s 16px.


	.xop-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 1em;
	}

Our grid is looking great, but you might notice that it’s not even. After all, we have 7 grid items to display our photos. To make our odd number grid appear even, we’re going to select the first image in our grid and style it so that it takes up the full width of our grid. To do this, I’m going to select the project and add the ::nth-child(1) declaration. This is going to select the first image in our grid. Then, we’ll make the grid column start at the 1st column and then span to the 3rd column, which will make the first photo in our image grid full-width.


	.project:nth-child(1) {
		grid-column: 1 / span 3;
	}

Now that we’ve established the grid, we can style our .project and .project figure.

For the .project figure, we’re going to set position: relative and overflow:hidden. We want all elements to be relative to the container and any overflow to be within the project container.

We’re also going to set the position of our figure images to relative, bring it to the front and add a 0.4 sec. transition.


	.project {
		width: 100%;
		height: 300px;
		text-decoration: none;
		margin: 0;
	}
	.project figure {
		position: relative;
		overflow: hidden;
	}
	.project figure img {
		position: relative;
		z-index: 999;
		transition: transform 0.4s;
	}

When we hover over an image, we want it to raise just high enough so that it sits on top of the figcaption. We’ll do this using the transform: translateY(-90px) property.


	.project figure:hover img {
		transform: translateY(-90px);
	}

Finally, we’re going to add a few styles to the figcaption. Notably, positioning it within the project container and adding some padding.


	.project figcaption {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 20px;
		height: 90px;
		width: 100%;
	}

Conclusion

That’s how you code this really cool animated image grid using HTML and CSS. You’ve also learned how easy it is to make a grid using CSS grid.

Want to share your work? Use the hashtag #xopixelPerfect to be featured.

Give this video a big thumbs up if you enjoyed it and be sure to subscribe to XO PIXEL for more great videos on design, code and tech. I’ll see you in the next video.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.