如何解决覆盖和悬停响应
我使用自定义 CSS 为 my portfolio page 创建了一个图像叠加效果。它在桌面浏览器上工作得很好，但它完全不适用于手机。谁能建议我在这里可以做什么？我怎样才能使这个响应？
<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>解决方法
在避免可能过于主观的详细建议的同时，您可以通过执行以下操作来极大地提高布局的响应能力：
- 移除除第一个
.flex-containerdiv 以外的所有 div。相反，将所有.img1-wrap元素放在第一个（也是唯一一个）.flex-container中。 - 将
flex-wrap: wrap;添加到.flex-container元素的 CSS 规则中。 - 将
justify-content: center;添加到.flex-container元素的 CSS 规则中。 - 将
widthCSS 属性从280更改为270。
当然可以进一步改进，但以上内容足以使内容以任何宽度呈现，并应作为您进一步定制的基础。在上面的建议中，我也没有解决与 flex 相关的规则的特定于浏览器的前缀，如果感兴趣，您可以进一步研究。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
