Help with creating a responsive image grid with CSS

Hi, I was wondering whether anyone would be able to help me. I am new to CSS and I am trying to create a responsive image grid with text that appears when the mouse hovers over the images. So far I have managed to start a basic layout, however, I am becoming stuck when adding more images. If I add more than two images the images start to go down vertically in a column, whereas I would like them to go horizontally in a row, with each row containing 5 images. I have attached a screen grab one of what happens when I try to add more than two images, instead of the images going below, I am trying to make 5 images go horizontally in the same row. I have also put my HTML and CSS down below.

Any help would be greatly appreciated!

Thank you.!!

HTML:

<div class="container">
		<ul>
			
				<div>
					
				</div>
			
			<li class="media">
				<img width="140px" height="200px" src="https://freight.cargo.site/t/original/i/22e1317617dbff2186899574b1982bc5e9d1aaed43f5cc9cc9097cb6feecbc7d/1.jpg" alt="Image" style="width: 140px; height: 200px;">
				<div class="info">
					<h2>Sister Series</h2>
					<div>
					</div>
				</div>
			</li>
			<li class="media">
				<img width="140px" height="200px" src="https://freight.cargo.site/t/original/i/22e1317617dbff2186899574b1982bc5e9d1aaed43f5cc9cc9097cb6feecbc7d/1.jpg" alt="Image" style="width: 140px; height: 200px;">
				<div class="info">
					<h2>Sister Series</h2>
			<div>
            </div>
            </div>
            
            </li></ul></div>

CSS:

* {box-sizing:border-box;}
		.container {max-width:1540px; margin:0 auto; padding:0 0px;}
		ul {list-style:none; padding:0; margin:1% 0;  font-size:0;}
		ul li {display:inline-block; width:100%; margin:0 0 0; padding:0; height:100%; width:100; position:relative;}

		ul li img {width:100%; display:block; margin: 10px;}
         

		ul li.text {background-color:#000; color:#FFF; padding:20px 10px; font-size:1.5rem; width:100%; }
		@media (min-width: 550px) {
			ul li {width:50%; height:100%;}
			ul li.text div {margin:2%;}
            
		}
		@media (min-width: 1000px) {
			ul li {width:39.5%; margin:0 .5%;}
			ul li:first-child {margin-left:0;}
			ul li:last-child {margin-right:77px;}
			ul li.text {width:19%; min-height:305px;}
			ul li.text div {}
		}
		@media (min-width: 1140px) {
			ul li.text {min-height:341px;}
			ul li.text div {margin:40% 0;}
		}
.info {  background: rgba(255, 255, 255, 0);

  bottom: 0;
  color: #fff;
  font-size: 1.0rem;
  font-family: sans-serif;
  left: 10px;
   
  opacity: 0;
  overflow: hidden;
  padding: 1rem 1rem;
  position: absolute;
  top: 10px;
  right: 10px;
  bottom:10px;
  -webkit-transition: 0.6s;
    transition: 0.6s;}
.info:hover { opacity: 1; }
* {
    
    

  margin: 0;
  
   
  padding: 0;
  border: 0;
}

Hi @es997, welcome to the forums

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

1 Like

Thank you!

1 Like

Hi there es997,

checkout the attachment, it contains a working
example which might help you with yours. :winky:

responsive-gallery.zip (74.1 KB)

coothead

Thank you, I will give this a try!

During development I have a footer with links to HTML and CSS w3.org free validation tools, also the following free Google Mobile Friendly validation site:

https://search.google.com/test/mobile-friendly

Search the forum for dynamic validation footer that may be included on every page.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.