Hello im trying to create an image gallery and i want text to hover over the images but i don't know or understand how to do it using flexbox. The code i have is this:
html
<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>
css:
.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%;
}
I want to add more images and make simple text appear when hovering the images, also i don't know how to add more images and apply the "flex configuration" to all of them and not just to only one. Would someone be so kind as to help me please Thank you everyone
Aucun commentaire:
Enregistrer un commentaire