HTML+CSS小案例

最新推荐文章于 2023-02-27 19:20:23 发布

喜欢烫发的码农

最新推荐文章于 2023-02-27 19:20:23 发布

阅读量183

点赞数

分类专栏：笔记文章标签： css html javascript

本文链接：https://blog.csdn.net/Newnono/article/details/125530306

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

通过鼠标移动来改变图片大小这是在这里插入图片描述
这是效果预览图，直接上代码。
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>
    <link rel="stylesheet" href="login.css" />
  </head>
  <body>
    <div class="box">
      <div class="img-box">
        <img src="./img/01.webp" alt="" />
      </div>
      <div class="img-box">
        <img src="./img/02.webp" alt="" />
      </div>
      <div class="img-box">
        <img src="./img/03.webp" alt="" />
      </div>
      <div class="img-box">
        <img src="./img/04.webp" alt="" />
      </div>
      <div class="img-box">
        <img src="./img/05.webp" alt="" />
      </div>
    </div>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
.box {
  width: 1200px;
  height: 550px;
  display: flex;
  flex-direction: row;
  -webkit-box-reflect: below 15px;
}
.img-box {
  width: 100px;
  height: 550px;
  overflow: hidden;
  transition: 0.3s;
}
.img-box:nth-child(5) {
  width: 800px;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.img-box:hover ~ .img-box:nth-child(5) {
  width: 100px;
}
.img-box:hover {
  width: 800px;
}