Why is product_span Div not coming on every image →
Hi there codeispoetry,
try it like this…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
.productbox {
position: relative;
}
.product_img {
max-width: 85%;
display: table;
width: 100%;
}
.product_img img {
width: 100%;
}
.product_span {
position: absolute;
padding: 15px 35px;
background-color: #FCFCFC;
border: 1px solid #000000;
top: 10%;
right: 0;
width: 90%;
max-width: 350px;
transform: translateX(-1%);
border: 1px solid #BCBCBC;
}
</style>
</head>
<body>
<div class="productbox">
<div class="product_img">
<img src="https://s3.amazonaws.com/amazonmyaccount/audi_ileana.jpg" alt="">
</div>
<div class="product_span">
<h5>The theme name</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="productbox">
<div class="product_img">
<img src="https://s3.amazonaws.com/amazonmyaccount/audi_ileana.jpg" alt="">
</div>
<div class="product_span">
<h5>The theme name</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="productbox">
<div class="product_img">
<img src="https://s3.amazonaws.com/amazonmyaccount/audi_ileana.jpg" alt="">
</div>
<div class="product_span">
<h5>The theme name</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="productbox">
<div class="product_img">
<img src="https://s3.amazonaws.com/amazonmyaccount/audi_ileana.jpg" alt="">
</div>
<div class="product_span">
<h5>The theme name</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</body>
</html>
I do not know what you would want to show for mobiles devices. 
coothead
2 Likes
position: relative; was the missing piece.
I am also puzzled how to handle this in responsive.
I want to build such repetitive arrangements for home page something like this →
In that codepen example you will need to swap out the img rules with the caption rules.
That is, the image needs to be in the page flow (not absolute) so it can hold the container open. Then the caption needs to be removed from the flow (absolute) so it can lay over the image.
The height of the caption box will be determined by the amount of text, which should be kept relatively short. I set the max-height at 70% then used overflow:hidden for excessive text.
Adjust the media queries to your liking, but they are close for that demo.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snippets Type 1</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
ul {
list-style-type: none;
padding: 0;
}
a {
text-decoration: none;
}
.sflex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sbox {
border: 1px solid #CCCCCC;
flex-basis: calc(33% - 10px);
align-items: center;
position: relative;
margin-top: 20px;
max-width: 600px;
}
.simg img {
display: block;
object-fit: cover;
width: 100%;
max-width: 600px;
margin: auto;
height: auto;
}
.stext {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height:70%;
overflow:hidden;
background: rgba(255, 255, 255, 0.8);
}
.stext h4 {
margin: .5em;
font-size: 1.1em;
font-weight: 700;
}
.stext p {
margin: .5em;
font-size: 1.1em;
font-weight: 600;
}
@media all and (max-width: 800px) {
.sbox {
flex-basis: calc(50% - 10px);
}
}
@media all and (max-width: 500px) {
.sbox {
flex-basis: 100%;
}
}
</style>
</head>
<body>
<ul class="sflex">
<li class="sbox">
<div class="simg">
<img src="http://images5.fanpop.com/image/photos/30300000/Dia-Mirza-dia-mirza-30372452-1024-768.jpg" alt="">
</div>
<div class="stext">
<h4>category</h4>
<p><a href=""> Seems to be a lengthy Title. What say Dudess.</a></p>
</div>
</li>
<li class="sbox">
<div class="simg">
<img src="http://images5.fanpop.com/image/photos/30300000/Dia-Mirza-dia-mirza-30372452-1024-768.jpg" alt="">
</div>
<div class="stext">
<h4>category</h4>
<p><a href=""> Seems to be a lengthy Title. What say Dudess. I am your only dude Isn't it?</a></p>
</div>
</li>
<li class="sbox">
<div class="simg">
<img src="http://images5.fanpop.com/image/photos/30300000/Dia-Mirza-dia-mirza-30372452-1024-768.jpg" alt="">
</div>
<div class="stext">
<h4>category</h4>
<p><a href=""> Seems to be a lengthy Title. What say Dudess.</a></p>
</div>
</li>
<li class="sbox">
<div class="simg">
<img src="http://images5.fanpop.com/image/photos/30300000/Dia-Mirza-dia-mirza-30372452-1024-768.jpg" alt="">
</div>
<div class="stext">
<h4>category</h4>
<p><a href=""> Seems to be a lengthy Title. What say Dudess. I am your only dude Isn't it?</a></p>
</div>
</li>
<li class="sbox">
<div class="simg">
<img src="http://images5.fanpop.com/image/photos/30300000/Dia-Mirza-dia-mirza-30372452-1024-768.jpg" alt="">
</div>
<div class="stext">
<h4>category</h4>
<p><a href=""> Seems to be a lengthy Title. What say Dudess.</a></p>
</div>
</li>
<li class="sbox">
<div class="simg">
<img src="http://images5.fanpop.com/image/photos/30300000/Dia-Mirza-dia-mirza-30372452-1024-768.jpg" alt="">
</div>
<div class="stext">
<h4>category</h4>
<p><a href=""> Seems to be a lengthy Title. What say Dudess. I am your only dude Isn't it?</a></p>
</div>
</li>
</ul>
</body>
</html>
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.