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

web前端开发

共 5096字，需浏览 11分钟

· 2022-07-09

今天练习的这个案例，是前几天我在视频号上分享过的，但是没有分享源码，于是有小伙伴在后台留言说，想要看一下源码，今天就给需要的小伙伴安排上，这个效果具体看下面视频，源码我就不直接打包，但是我直接贴在文章中了，方便浏览，节省下载时间。

具体的效果，请看下面的视频：

另外，今天练习项目中的图片素材，我也上传到百度网盘了，需要的小伙伴可以自行获取，当然，你可以直接用其他的图片素材代替，这个都不是什么大问题。

需要图片素材的小伙伴可以自行获取，地址如下: https://pan.baidu.com/s/10Ag4qT6UwnIwjIVfo-1zVg?pwd=e38y

提取码: e38y

最后，我们再来看一下实现的代码。

HTML代码：

<!doctype html><html><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>【每日一练】23—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;}