javascript - 悬停在图像上,叠加幻灯片生效但没有任何反转效果
问题描述
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
如上面的代码,当我们将鼠标悬停在图像上时,它会获得叠加效果,但是在鼠标离开时,我不想要这种反向效果。当鼠标离开时,我只想隐藏覆盖并在开始时显示图像。我该如何实现这一点。我曾尝试使用 javascript,但对我没有任何帮助。帮帮我。
参考代码:链接
解决方案
将转换移动到hover
状态
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
}
.container:hover .overlay {
height: 100%;
transition: .5s ease;
/* here */
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="http://www.fillmurray.com/460/300" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
推荐阅读
- python - Django 中的异常错误。创建超级用户后无法登录管理员
- html - 如何覆盖 PrimeNG 的
标记默认样式 - reactjs - Map React JS:用列显示数据
- html - 字体大小强制圆形按钮更宽
- c# - 将 DirectoryServices SearchResult 序列化为 JSON
- c# - Unity - 确定与不同“标签”的项目冲突
- react-native - 我应该在 react-native/redux fetch 中使用什么而不是 Body.text() 来进行非 UTF-8 编码?
- ruby-on-rails - 从 CSV 行创建的散列不像普通散列那样表现
- c# - 使用 webforms C# 和 ajax 控制工具包的 Internet Explorer 11 上的冲突
- redirect - php 位置标头重定向即使在输出开始后仍然有效