Reputation: 3
I made two images with a transparent text overlay, but it doesn't seem to want to sit next to each other without one of the "text banners" overlapping the other. I've looked up various things but none of them really worked without issue. Is there any way to fix this?
a.row1picture1 {
position: relative;
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.row1picture1 img {
width: 400px;
height: 435px;
}
a.row1picture1 > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
top: 70%;
transform: translateY(-50%);
}
a.row1picture1 > h3 span {
display: block;
color: black;
font-weight: bold;
font-size:20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(255, 255, 255, 0.6);
padding: 15px;
}
<a class="row1picture1">
<img src="https://i.imgur.com/6DevsS5.png"/>
<h3><span>LIMITED EDITION</span></h3>
</a>
<a class="row1picture1">
<img src="https://i.imgur.com/jm8QYjK.png"/>
<h3><span>NEW ARRIVALS</span></h3>
</a>
Upvotes: 0
Views: 72
Reputation: 14835
The easiest way is to wrap your boxes inside a flexbox.
display: flex
will do the trick.
You can read more about flexbox on MDN
.row {
display: flex;
}
a.row1picture1 {
position: relative;
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.row1picture1 img {
width: 400px;
height: 435px;
}
a.row1picture1 > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
top: 70%;
transform: translateY(-50%);
}
a.row1picture1 > h3 span {
display: block;
color: black;
font-weight: bold;
font-size:20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(255, 255, 255, 0.6);
padding: 15px;
}
<div class="row">
<a class="row1picture1">
<img src="https://i.imgur.com/6DevsS5.png"/>
<h3><span>LIMITED EDITION</span></h3>
</a>
<a class="row1picture1">
<img src="https://i.imgur.com/jm8QYjK.png"/>
<h3><span>NEW ARRIVALS</span></h3>
</a>
</div>
Upvotes: 1