Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Overlay and Hover Responsiveness


sumitb

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...