会缩放的图片

最新推荐文章于 2024-07-26 08:00:00 发布

usrname为username

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量66

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126188785

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习视频链接：会缩放的图片

最终效果：

源代码：

为了实现此效果，决定性的代码如下：

 /* 超出的部分隐藏 */
    overflow: hidden;
 /* 动画过渡0.5s */
    transition: 0.5s;
 /* 鼠标悬浮，图片放大1.3倍 */
    transform: scale(1.3);

style.css文件如下：

.main{
    width: 200px;
    height: 130px;
    background-color: red;
    text-align: center;
    /* 超出的部分隐藏 */
    overflow: hidden;
    /* 居中显示 */
    margin: 100px auto;
}
.main img{
    width: 200px;
    height: 130px;
    /* 为何此处必须是130才能满足标题位于图片下方而非右方 */
    float: left;
    /* 动画过渡0.5s */
    transition: 0.5s;
}
.title{
    width: 100%;
    height: 28px;
    background: black;
    /* 左浮动去掉标题和图片的间隙 */
    float: left;
    /* 使用相对定位，让标题位于图片上的下部 */
    position: relative;
    top: -28px;
    /* 不透明度 */
    opacity: 0.5;
}
.main a{
    position: relative;
    top:-55px;
    color: #fff;
    /* 去掉超链接下划线 */
    text-decoration: none;
}
.main a:hover{
    /* 鼠标悬浮，超链接下方出现下划线 */
    text-decoration: underline;
}
.main img:hover{
    /* 鼠标悬浮，图片放大1.3倍 */
    transform: scale(1.3);
    /* 鼠标指针改变为手型光标*/
    cursor: pointer;
}

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用时需要写清楚是css文件夹下面的style.css文件 -->
    <!-- 外链样式表引用 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 本节样式不写在html文件中，使用外链样式表 -->
    <div class="main">
    <!-- 接着插入图片 -->
    <img src="img/1.jpg" alt="">
    <!-- 再插入一个div作为标题 -->
    <div class="title"></div>
    <!-- 插入标题内超链接 -->
    <a href="#">风之旅人</a>
    </div>
</body>
</html>