Quicker

您的指尖工具箱

操作更少，收获更多！

<div class="img-demo">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2023/10/03/202816_202824_0.gif" alt="AAA">
<div class="img-font">
<div class="text-center">
<div style="font-size:35px; font-weight: bold;">Quicker</div>
<div style="font-size:50px">您的指尖工具箱</div>
<div style="font-size:16px">操作更少，收获更多！</div>
</div>
</div>
</div>

<!-------------鼠标悬浮到图片显示自定义内容图层---------------->
<style>
.img-demo {
position: relative;
display: inline-block;
overflow: hidden;
}
.img-font {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
opacity: 0;
transition: transform 0.3s ease-in-out, opacity 0.4s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
}
.img-demo:hover .img-font {
transform: translateY(-100%);
opacity: 1;
}
</style>
<!-------------鼠标悬浮到图片显示自定义内容图层---------------->