I created an image overlay effect for my portfolio page complete with custom CSS. It is working perfectly fine on a desktop browser but it's completely not working for mobiles. Can anyone suggest what I can do here? How can I make this responsive?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.flex-container {
position: inherit;
display: flex;
}
.img1-wrap {
position: relative;
overflow: hidden;
width: 280px;
padding: 50px;
}
.image {
width: 2000px;
}
.overlay {
display: block;
position: sticky;
bottom: 0;
left: 0;
right: 0;
background-color: #ad0909;
overflow: hidden;
height: 0%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 12px;
font-family: Reggae One;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
<link href='https://fonts.googleapis.com/css?family=Reggae One' rel='stylesheet'>
</head>
<body>
<div class="flex-container">
<div class="img1-wrap">
<img src="/s/BBBook" alt="Avatar" class="image">
<div class="overlay">
<div class="text">BBBook is a community-based reading platform that facilitates collaborative study for university and school students.</div>
</div>
</div>
<div class="img1-wrap">
<a href="https://www.cash.live/">
<img src="/s/Cash-Live-Logo.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Cash Live is a live-streamed, free to enter poker game show featuring daily tournaments where players compete for cash.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://codeblugames.com/">
<img src="/s/CBG" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Code Blue Games is developing 6Degrees, a Third Person Action Adventure/Tower Defense game.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<img src="/s/Acces-Job" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Accessible Jobs is developing an online job portal focused on helping people with disabilities find accessible work.</div>
</div>
</div>
</div>
<div class="flex-container">
<div class="img1-wrap">
<a href="https://dineeasy.ca/">
<img src="/s/dinenew" alt="Avatar" class="image">
<div class="overlay">
<div class="text">DineEasy is a one-stop platform for powering the digital infrastructure for restaurants, cafes, and hotels.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://www.gamejobs.ninja/" target="blank">
<img src="/s/gamesninja.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">GameJobs.Ninja is a recruitment platform focused on the video games industry.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://www.myhubly.com/" target="blank">
<img src="/s/hubli" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hubly is building technology to power the future of financial planning and advice.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://www.ludare.com/" target="blank">
<img src="/s/Ludare" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Ludare Games Group is a publisher of free-to-play mobile games featuring top-tier licensed intellectual properties.</div>
</div>
</a>
</div>
</div>
<div class="flex-container">
<div class="img1-wrap">
<a href="https://pepper.gg/" target="blank">
<img src="/s/pepac.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">PEPPER lets gamers and organizers discover and create local and online events for cash prizes. Acquired by TGS Esports.</div>
</div>
</a>
</div>
<div class="img1-wrap">
<a href="https://storiiitime.com/" target="blank">
<img src="/s/StoriiTime" alt="Avatar" class="image">
<div class="overlay">
<div class="text">StoriiiTime empowers online influencers to earn more with less work through its no-code narrative game templates. </div>
</div>
</a>
</div>
<div class="img1-wrap">
<img src="/s/Startup" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Startup Arena is building a model for co-working startup spaces in a post-COVID world.</div>
</div>
</div>
<div class="img1-wrap">
<img src="/s/SuperCommerce" alt="Avatar" class="image">
<div class="overlay">
<div class="text">SuperCommerce is a buyer, operator, and scaler of ecommerce websites.
</div>
</div>
</div>
</div>
<div class="flex-container">
<div class="img1-wrap">
<img src="/s/v2ac.png" alt="Avatar" class="image">
<a href="https://victorysquare.com/" target="blank">
<div class="overlay">
<div class="text">V2 Games is a developer and publisher of casual mobile games. Acquired by Victory Square Technologies.
</div>
</div>
</a>
</div>
<div class="img1-wrap">
<img src="/s/Vetsie" alt="Avatar" class="image">
<a href="https://www.vetsie.com/" target="blank">
<div class="overlay">
<div class="text">Vetsie is making veterinary care more accessible by leveraging innovative technology to transform pet care.</div>
</div>
</a>
</div>
</div>
</body>