transition 图片放大+遮罩层文字

最新推荐文章于 2023-08-14 09:31:09 发布

咬了蜘蛛侠的小蜘蛛

最新推荐文章于 2023-08-14 09:31:09 发布

阅读量338

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/JS_kill_apple/article/details/106916954

版权

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

摘要由CSDN通过智能技术生成

<!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;
}
/* 包含图片及隐藏文字的总

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咬了蜘蛛侠的小蜘蛛

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
transition 图片放大+遮罩层文字

<!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="transi.
复制链接

扫一扫