css - 在鼠标移过图像之前打开图像叠加
问题描述
我想了解为什么当我将鼠标放在页面上的任何位置时,悬停效果会应用于图像,而不是在鼠标直接放在图像本身时激活。我试过改变主容器的宽度和高度,但这似乎并没有解决它。
<https://codepen.io/jl88s/pen/oawOOM?editors=1100>
解决方案
我的第一个解决方案导致了另一个问题。当您尝试悬停按钮时,叠加层会消失。对于那个很抱歉。检查我的新解决方案。
这是CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.image {
width: 400px;
height: 400px;
display: block;
}
.middle {
transition: 2s ease;
position: absolute;
text-align: center;
opacity: 0;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: orange;
color: white;
font-size: 1em;
padding: 16px 32px;
text-transform: uppercase;
}
推荐阅读
- hibernate - And/Or query conditions in Criteria with Grails
- reactjs - Next JS - Problem with reloading or direct dynamic route
- go - keyword "go" in golang, whether go is a atomic operation?
- c++ - Cannot compile my code when using GoogleTest with Visual Studio 2019
- hibernate - Spring Batch - HibernateItemWriter:确保 SQL Server 实例正在主机上运行并在端口接受 TCP/IP 连接
- javascript - webpack TypeError:无法读取未定义的属性“已解决”
- python-3.x - 无法在 Macos M1 中使用 python 3.9 安装 pyFFTW
- batch-file - What is the method to hide files in multiple images with batch file?
- wordpress - What wordpress template to use for a "/?post_types=boardgames" URL?
- notepad++ - Remove four specific lines in Notepad++ without delete similar lines