sumitb Posted February 22, 2021 Share Posted February 22, 2021 Site URL: https://www.thefirst.vc/portfolio Hello, so i created image overlay effect for my portfolio page complete with custom css. It is working perfectly fine on desktop browser (https://www.thefirst.vc/portfolio) but its completely not working for mobiles. Can anyone suggest what can did i do here? How can i make this responsive? Code: <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> Link to comment
tuanphan Posted February 27, 2021 Share Posted February 27, 2021 Hi, Can you explain clearly? "completely not working for mobiles" Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
creedon Posted February 28, 2021 Share Posted February 28, 2021 Hover doesn't work the same on mobile the same as desktop. On desktop the hover reacts to the fact your mouse is hovering over an element. On mobile that is no mouse and can't detect your finger hovering over the screen. Not yet anyway! So for mobile you have to redesign for that fact. Or, live with the way hover is treated on some mobile which is touch/click to get the "hover" effect. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.