How can I do a module like this? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm trying to do a boxes like below for my website's events but I got stuck.
The problems I can not solve:
Reduce images to the same size
Create modules of the same size
Align the modules in the same line
.background {
width:360px;
height:200px;
}
.image{
width:100%;
height:100%;
}
.text {
width:100%;
height:25%;
color:#ffffff;
background:blue;
z-index: auto;
}
<div class="background">
<div class="image">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>

Answer 1

Questions... and answers. Let's go over the issues you have one by one.
Reduce images to the same size
It's best to let CSS take care of this. By setting the background of an element to the image you want and setting the background-size to cover, the browser will scale the image such that the aspect ratio is maintained and the image nicely covers all of the element you put it in.
Now make all elements the same size and voilà, this point is done.
Create modules of the same size
This can be achieved in two ways.
Set fixed sizes on your boxes.
Use more advanced CSS, in particular the flexbox layout module.
To keep things simple, I'll use the first approach for now. Read up on flex if you are interested in it!
Align the modules in the same line
This can be achieved in many ways, but the most straightforward one is setting display to inline-block. This will make it so that every block in your module is treated as a, well, a block, meaning that it can have a set width and height. At the same time, it is laid out as if it were text. So, one block after another will simply go on the same line. When that does not fit on screen anymore, blocks will flow to the next line.
Putting this all together. Here is a quick toy example that includes all of the above. It should serve as a good starting point to build from.
.card {
display: inline-block;
vertical-align: top;
width: 150px;
height: 270px;
margin: 10px;
padding: 0;
border: 1px solid #444;
border-radius: 5px;
}
.image {
/* width is 100%, so 150px, by default */
height: 150px;
background-size: cover;
}
.text {
height: 150px;
margin-top: -40px;
}
.text > p {
max-height: 90px;
overflow: hidden;
text-overflow: ellipsis;
}
h1 {
margin: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.7);
color: #eee;
font-size: 20px;
line-height: 20px;
}
p {
margin: 0;
padding: 10px;
font-size: 15px;
line-height: 20px;
}
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/abstract/');"></div>
<div class="text">
<h1>Foo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus auctor odio, sed lobortis odio pellentesque tincidunt. Curabitur et libero maximus, consequat mi non, dignissim turpis.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/city/');"></div>
<div class="text">
<h1>Bar</h1>
<p>Sed ac lacus vel mi mollis ullamcorper quis ac sapien. Ut quis ornare ligula. Nullam a sapien eget arcu mattis aliquam. Quisque dapibus leo vel lacus rutrum sollicitudin.</p>
</div>
</div>
<div class="card">
<div class="image"
style="background-image: url('http://lorempixel.com/150/150/cats/');"></div>
<div class="text">
<h1>Baz</h1>
<p>Nullam eu urna dictum, gravida augue nec, dignissim enim. Duis sit amet elit quis mauris consectetur rhoncus et a ipsum. Fusce vel sagittis nulla, et imperdiet quam.</p>
</div>
</div>

Answer 2

You need to change your HTML and CSS to make it work properly.
<div class="background">
<div class="image" style="background-image: url('https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg');">
</div>
<div class="text">
<p>test test test</p>
</div>
</div>
then your CSS should look like this:
.background {
width: 360px;
height: 200px;
position: relative;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
height: inherit;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
}
That will make an image to fully cover the background space and then the .text will be an overlay on the image. Actually, you could even skip the .image div, add background and the CSS to the .background div and it will work as well.
The example you provided features something different than your code is suggesting. If you want to achieve the look from example, then:
.background {
width: 360px;
height: 200px;
position: relative;
background: #fff;
}
.image {
background-size: cover; /* that will keep the image in original ratio */
background-position: center center;
position: relative;
}
.image:before {
content: "";
display: block;
padding-top: 60%; /* that will make a fixed ratio of you image box, even if you'll scale the background boc /*
}
.text {
/* actually it doesn't need styling in that case */
}
.background's parent {
display: flex; /* to make the blocks even in height without setting that as a fixed value */
}

Answer 3

Your code and the example you provided are doing different things. In order to get the effect of your example, you need more than one "card" (image and text together).
You can use display: flex on the .background div so that all the cards are the same height. Then you can add some margin to the cards so they are separated a little.
.background {
display: flex;
background: cyan;
}
.card {
width: 360px;
background: white;
margin: 10px;
}
.text {
padding: 0 5px;
}
.text p {
width:100%;
overflow: hidden;
}
<div class="background">
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>test test test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>another test</p>
</div>
</div>
<div class="card">
<img src="https://zero.eu/content/uploads/2017/01/Ryley_Walker-730x490.jpg" width="360" height="200" class="wp-image-156 hoverZoomLink" alt="Willie Peyote Live"/>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit, massa sed tristique lacinia, mauris lectus ultricies ipsum, vitae lobortis lectus arcu quis nisl. Etiam pulvinar porttitor mi, at aliquet quam mattis non.</p>
</div>
</div>
</div>