Responsive Animated Image Grid HTML5 CSS3

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!

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.

Comments

  1. hi marissa,
    i tried replicating what you showed but for some reason the buttons dont take shape. they just show up as four hypertext links in bullet-point format. please help if you know where im going wrong.

  2. how do l upload my pics from responsive Animated Image Grid HTML5 CSS3 _ XO PIXEL.mp4 and you didn’t show us how to link css

  3. My images get cropped very badly how can i fix that and how can i make it so when i click on it, it brings me to another page?

  4. Hey! I was trying this code out on Adobe Dreamweaver, and I couldn’t quite figure out how to get my own photos in to the grid. I have an images folder linked to the html and tried inserting those photo codes but it didn’t work.

    1. Hey, Sarah! Make sure the relative path to your images folder is correct.

      • path if the images folder is in the current folder = /images/picture.jpg

      • path if the images folder is one level above the current folder = ../images/picture.jpg

      Try the paths above and let me know if that works.

    1. Hi Ashley,

      You can reply with a snippet of your code so I can take a look. It’s hard to say without seeing your code. It does work for me when I add a URL to the demo.

    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.

    2. Hi Alexa,

      By default, all images are pointing to the images folder. Make sure it matches the code below and any new images are stored in that folder.
      For example: background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)),url(../images/feather.jpg);