Я пытаюсь создать галерею изображений, и я хочу, чтобы текст располагался над изображениями с помощью flexbox, но я не уверен, как этого добиться. Это код:
.gallery-links-h2{
font-family: Catamaran;
font-size: 28px;
font-weight: 600;
color: #111;
text-transform: uppercase;
text-align: center;
padding: 20px;
}
.gallery-links {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.gallery-image-1 {
flex-basis: 70%;
margin: 10px;
}
.gallery-image-1 {
width: 100%;
}
<body>
<main>
<div class="wrapper">
<h2 class="gallery-links-h2"> Gallery </h2>
</div>
<section class="gallery-links">
<a href="#" class="gallery-image-1">
<img src="img/1.png">
</a>
</section>
</main>
</body>
Я хочу добавить больше изображений и сделать простой текст отображаемым при наведении на них изображений, также я не знаю, как добавить больше изображений и применить "flex" Конфигурация "для всех них, а не только для одного. Кто-нибудь будет так любезен, чтобы помочь мне, пожалуйста Спасибо всем