CSS实现图像悬停动画的效果【每日一题】

最新推荐文章于 2024-07-18 17:34:14 发布

渡猿人

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/m0_50105168/article/details/125678884

版权

我们今天直奔主题！

HTML代码：


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现图像悬停动画的效果</title>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="imgBx">
        <img src="img1.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post One</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img2.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Two</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img3.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Three</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img4.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Four</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img5.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Five</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img6.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Six</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS代码：


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
}
.container
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1100px;
}
.container .card
{
  position: relative;
  width: 320px;
  height: 320px;
  margin: 15px;
  overflow: hidden;
}
.container .card .imgBx,
.container .card .contentBx
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container .card .imgBx img
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container .card .contentBx::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.5s ease-in-out;
  transform-origin: right;
  transition-delay: 0.5s;
}
.container .card:hover .contentBx::before
{
  transform: scaleX(1);
  transition: transform 0.5s ease-in-out;
  transform-origin: left;
  transition-delay: 0s;
}
.container .card .contentBx
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .card .contentBx .content
{
  position: relative;
  padding: 30px;
  z-index: 1;
  transition: 0.5s;
  transform: translateX(-300px);
  transition-delay: 0s;
}
.container .card:hover .contentBx .content
{
  transform: translateX(0px);
  transition-delay: 0.5s;
}
.container .card .contentBx .content h3
{
  font-size: 1.3em;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.container .card .contentBx .content p
{
  font-size: 1em;
  line-height: 1.4em;
  font-weight: 300;
}

以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我！哦对了，把自己实现的小特效@到下方评论区吧！！！