I'm a beginner at UI/UX and i was fidgeting with some gallery transitions which had hover attributes, and added Bootstrap cards in them, So As I Hover on the image (Which Appeared Blank Before) Now Has An Overlay And Shows the text Intended, with the Bootstrap cards as well. But the Problem is After Hours of finding a solution, I still cannot make it responsive. PLEASE HELP!
This is The HTML 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;">
<img src="Images/Body-Section-2-pic3-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;">MEN'S DAY OUT</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;">
<img src="Images/Body-Section-2-pic4-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;">LADIES ON THE TRACK</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;">
<img src="Images/Body-Section-2-pic5-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;">FAMILIAL AGRESSION</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>
</div>
</div>
</div>
</div>
This Is The CSS I Used
.gallery {
width: 100%;
height: auto;
position: relative;
padding: 0;
margin: 0;
text-align: center;}
.gallery-image{
cursor:pointer;
position: relative;
display: block;}
.gallery-text{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: auto;
text-align: center;
background-color: rgba(0,0,0,0.8);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
vertical-align:middle;}
.gallery-text:hover{
opacity: 1;}
.gallery-text h3{
color: white;
font-size: 40px;
font-family: sans-serif;
font-weight: bold;
display: inline-table;
vertical-align:middle;}
CSS
.gallery {
width: 100%;
height: auto;
position: relative;
padding: 0;
margin: 0;
text-align: center;}
.gallery-image{
cursor:pointer;
position: relative;
display: block;}
.gallery-text{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: auto;
text-align: center;
background-color: rgba(0,0,0,0.8);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
vertical-align:middle;
display: flex;
justify-content: center;
align-items: center;}
.gallery-text:hover{
opacity: 1;}
.gallery-text h3{
color: white;
font-size: 40px;
font-family: sans-serif;
font-weight: bold;
display: inline-table;
vertical-align:middle;}
.card{
margin: 5% 0%;}
.card-body{
margin: 0% 0% 0% 3%;
padding: 6% 0%;}
@media screen and (max-width: 350px) {
.card {
width: 100% !important;}}
HTML
<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>PASSION FOR THE GAMES, WITH A NEW PERSPECTIVE.</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<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>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
<img src="Images/Body-Section-2-pic3-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;">MEN'S DAY OUT</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>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
<img src="Images/Body-Section-2-pic4-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;">LADIES ON THE TRACK</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>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="card" style="height: 400px; width: 270px; display: inline-block; background-color: #a2a787; margin-left: 10px;">
<img src="Images/Body-Section-2-pic5-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;">FAMILIAL AGRESSION</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>
</div>
</div>
</div>