Just starting out in UI/UX, I played around with some gallery transitions featuring hover effects, and incorporated Bootstrap cards into the mix. When I hover over the image (which was blank at first), it now displays an overlay with the intended text, along with the Bootstrap cards. However, despite hours of searching for a solution, I can't seem to make it responsive. Please help!
Here's the HTML code I used:
<div class="gallery mt-5">
<div class="gallery-image">
<img src="Images/Body-Section-2-pic-unsplash.jpg" alt="Not Found" width="100%" height="670px"/>
<div class="gallery-text" >
<h3 style="line-height: 500px;">PASSION FOR THE GAMES, WITH A NEW PERSPECTIVE.</h3>
<div class="container">
<div class="row" style="display: flex;">
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787;">
<img src="Images/Body-Section-2-pic2-unsplash.jpg" alt="Not Found" class="card-img-top rounded" height="140px" width="200px" >
<div class="card-body">
<h5 class="card-title mt-2" style="color: #42573f; font-weight: bold;">ONLY KIDZ ZONE</h5>
<p class="card-text ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" style="text-decoration: none; color: #57443e; font-weight: bold;">INDOOR GAMES</a>
<br>
<a href="#" class="" style="text-decoration: none; color: #57443e; font-weight: bold;">OUTDOOR GAMES</a>
</div>
</div>
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
...
</div>
...
</div>
</div>
</div>
</div>
</div>
This Is The CSS I Used:
.gallery {
width: 100%;
height: auto;
position: relative;
padding: 0;
margin: 0;
text-align: center;}
...