transition 图片放大+遮罩层文字

最新推荐文章于 2023-08-11 07:00:00 发布

咬了蜘蛛侠的小蜘蛛

最新推荐文章于 2023-08-11 07:00:00 发布

阅读量418

点赞数

文章标签： css3

本文链接：https://blog.youkuaiyun.com/JS_kill_apple/article/details/106916954

版权

本文介绍了如何使用CSS3实现一个图片在鼠标悬停时放大，并同时显示遮罩层和文字的效果。详细讲解了相关CSS代码及其背后的动画原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="transition2.css">
</head>

<body>
    <div class="box1">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592875514&di=7b7312d562850324f6edab5caa7a659d&src=http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg">
        <div class="img-text">
            <div class="word">这是一颗草莓</div>
        </div>
    </div>
</body>

</html>

CSS代码：

* {
    margin: 0;
    padding: 0;
}
/* 包含图片及隐藏文字的总盒子 */
.box1 {
    width: 500px;
    height: 417px;
    position: relative;
    overflow: hidden;
}
.box1::before {
    content: "";
    width: 498px;
    height: 415px;
    opacity: 0;
    transform: scale(1) rotate(180deg);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all 0.6s ease-in-out;
    border: 1px solid black;
}
.box1:hover::before {
    opacity: 1;
    transform: scale(1) rotate(0);
}
.box1 img {
    width: 500px;
    height: 417px;
    transition: all 0.6s ease-in-out;
}
/* 图片缩放 */
.box1:hover img {
    transform: scale(1.1);
}
.box1 .img-text {
    width: 500px;
    height: 417px;
    color: black;
    opacity: 0;
    transform: scale(3);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: all 0.6s ease;
    background-color: rgba(168, 165, 165, 0.5);
}
.box1:hover .img-text {
    opacity: 1;
    transform: scale(1);
}
.word {
    width: 500px;
    height: 417px;
    line-height: 417px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
}