https://jsfiddle.net/n6mhg847/2/
I would want the images to be right next to each other.
Also responsive, staying as a plus image.
Like this: https://jsfiddle.net/15ta8c4n/
But staying as a plus sign, that isn’t a plus sign in there, just shows the responsiveness I am looking for.
Bing Chat (AI) came up with this:
I am thinking there is a better way to do it than this:
.container {
position: relative;
width: 200px;
height: 200px;
}
.container img {
position: absolute;
width: 40px;
height: 40px;
}
.container img:nth-child(1) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container img:nth-child(2) {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.container img:nth-child(3) {
top: 50%;
right: 0;
transform: translateY(-50%);
}
.container img:nth-child(4) {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.container img:nth-child(5) {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
<div class="container">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
This would be closer: https://jsfiddle.net/gyv2u9xr/1/
But I am sure there is a better way.
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.block {
width: 100px;
height: 100px;
background-size: cover;
}
.horizontal {
flex-basis: 100%;
display: flex;
justify-content: center;
}
@media (max-width: 600px) {
.block {
width: 50px;
height: 50px;
}
}
<div class="container">
<div class="block" style="background-image: url('https://i.imgur.com/z5MMJnv.png');"></div>
<div class="horizontal">
<div class="block" style="background-image: url('https://i.imgur.com/5u16syR.png');"></div>
<div class="block" style="background-image: url('https://i.imgur.com/ygTtvme.png');"></div>
<div class="block" style="background-image: url('https://i.imgur.com/QziKNDW.png');"></div>
</div>
<div class="block" style="background-image: url('https://i.imgur.com/8Jf8LLc.png');"></div>
</div>
