Help with creating a responsive image grid with CSS

HTML & CSS
1

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;
}

Screen Shot 2021-01-21 at 15.57.43
Screen Shot 2021-01-21 at 15.57.432880×1550 139 KB

2

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
3

Thank you!

1 Like
4

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

5

Thank you, I will give this a try!

6

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.

7

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