I have a layout with two flexboxes - one for text and the other for category links. I'm struggling to align the category pictures in a 2 by 2 grid format. I've tried using row wrap and centering the contents, but it's not working as intended. I also attempted various methods with containers, but it always ends up as a 1 x 4 grid instead of 2 x 2. Additionally, I'm having trouble getting the hover effect to perfectly fit the image, even though the height and width are set to 100%. How can I resolve these issues?
.flex-container {
display: flex;
justify-content: center;
flex-direction: row;
width: 800px;
}
.flex-container > div {
margin: 10px;
padding: 20px;
font-size: 20px;
text-align: center;
flex-flow: row wrap;
}
.one {
flex: 1 1 auto;
}
.two {
flex: 1 1 auto;
}
div.two a > img {
padding: 10px;
margin: 10px;
}
a {
text-decoration: none;
}
h1 {
display: block;
font-size: 1.3em;
margin: 0.67em 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 0.8em;
margin: 0.83em 0;
font-weight: bold;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 200%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: darkorchid;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: Black;
font-size: 18px;
position: absolute;
top: 30%;
left: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}<section>
<div class="flex-container">
<div class="one"> <h1> Welcome to Delicious Book store, <br>
where you can find so many delicious food!</h1>
<p> As a specialized book store, we have many cooking books on
holiday specials, vegetarian, desserts and cultural cuisines!</p>
</div>
<div class="two"> <h2> Shop By Category </h2>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Holiday</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Dessert</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Vegetarian</div>
</div></a>
</div>
<div class="container">
<a href="category.html">
<img src="images/categories/holiday.jpg" alt="holiday image" class="image">
<div class="overlay">
<div class="text">Cultural Cuisine</div>
</div></a>
</div>
</div>
</div>
</section>