Responsive Animated Image Grid HTML5 CSS3

This week I’ll be showing you how to create a Responsive Animated Image Grid. This image grid has a really nice subtle animation effect when the mouse hovers over each image box.

The HTML5

First, we’re going to create a div and give it the class “xop-section”. Within this div, we’re going to create an unordered list and name it “xop-grid”. Now we’re going to create the actual image squares by first using the list tag. Then, we’re going to use the div tag and give it two classes: xop-box and xop-img-1. Remember that we’ll be selecting all of the class names we made in the HTML in our CSS stylesheet. Within the div, we’re going to finally add some text—let’s add a heading using the h3 tag and then add a short line of text using the p tag.



The CSS3

I’ve added the Google Fonts code at the top of the CSS file since we’ll be using this font for our h3 headings. The first selection we’ll be making is the xop-section—which acts as the container for the images. We’re going to set it’s max-width to 960px. Then, we’re going to use margin: 0 auto to center everything. Lastly, we’re going to add some padding all around.

Next, we’re going to add a margin to the top of the xop-grid. Set padding to 0, remove bullets using the list-style: none declaration, display it as a block element, align the text to the center and set it’s width to 100%.

We’re just going to add a few declarations to accommodate for Internet Explorer so our Responsive Animated Image Grid show up how we want it to.

Now, we’re going to style the actual size of the boxes and how we want to display them. First, we’re going to set it’s width and height to 328px. Then, we’re going to display the list items inline-block. Lastly, we’re going to add a margin all around them that’s 20px.


@import url('https://fonts.googleapis.com/css?family=Pacifico');
.xop-section {
	max-width: 960px;
	margin: 0 auto;
	padding: 6% 2%;
}

.xop-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.xop-grid:after {
	clear: both;
}

.xop-grid:after, .xop-box:before {
	content: '';
	display: table;
}

.xop-grid li {
	width: 328px;
	height: 328px;
	display: inline-block;
	margin: 20px;
}

We’re going to add some cool transitions and transformations in this selector. First, we’re going to set it’s width and height to 100%. Then, we’re going to set the position of everything in the boxes, which includes all the text, to “relative”. We’re going to use the pointer cursor and set its border-radius to 10px to add rounded corners to the box.

Now, we’re going to add the browser support for the transitions and transform properties. That way, there is a smooth transition and transformation to the boxes. We’re going to add a 3-second delay for both properties.


.xop-grid li {
	width: 328px;
	height: 328px;
	display: inline-block;
	margin: 20px;
}

.xop-box {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
    border-radius: 10px;
    -webkit-transition: 0.3s ease-in-out, 
    -webkit-transform 0.3s ease-in-out;
	-moz-transition:  0.3s ease-in-out, 
    -moz-transform 0.3s ease-in-out;
    transition: all 0.3s ease-in-out, 
    transform 0.3s ease-in-out, ;
}

.xop-box:hover {
	transform: scale(1.05); 
}

Now, we’re just going to add the background image and add a subtle dark gradient so that the text that we’re going to put on top is easier to read. Since we’re going to do the same thing for all four boxes, I’m just going to copy and paste the declaration and just change the image number for each individual class name.

We’re almost done but first, we need to style the container that holders all of our text elements. Let’s set the position of the .xop-info container to absolute and have it inherit our width and height sizes.

Finally, we’re going to style our heading and our paragraph text. Note that I’m using two different Google fonts for both.


.xop-img-1 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/paint.jpg);
}

.xop-img-2 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/soap.jpg);
}

.xop-img-3 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/flower.jpg);
}

.xop-img-4 {
	background: linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), /* bottom, image */
	url(../images/feather.jpg);
}

.xop-info {
	position: absolute;
	width: inherit;
	height: inherit;
}

.xop-info h3 {
	font-family: 'Pacifico', cursive;
	font-weight: 400;
	color: #fff;
	font-size: 42px;
	margin: 0 30px;
	padding: 100px 0 0 0;
	line-height: 1.5;
}

.xop-info p {
	font-family: 'Source Sans Pro', sans-serif;
	color: #fff;
	padding: 4px 5px;
	margin: 0 30px;
	font-size: 14px;
	line-height: 2;
}

Comment Below

Feel free to share a screenshot of what you’ve made using this tutorial in the comments section below! Have any questions or comments? Let’s chat in the comment below!

2 Comments

    1. Try again and test her code because i tested her code and it works. I had the same problem and I probably missed it, but it works now that I have changed the font and the pictures.

Leave a Reply

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

More On XO PIXEL