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