今天小编给大家带来的是一个简单的小代码，可以给图文组件加上一个鼠标移入向上漂浮的效果，如下图所示：

和过去小编写过的小教程一样，这类代码本身并不复杂，但是在合适的地方使用就可以起到点睛的作用，让网站看起来生动很多。

下面就让我们一起来看看如何实现这个效果吧！首先是这个效果的代码：

<style>

    ._13i6hfl3co000{

  }

._13i6hfl3co000 .zz-comp-list__item{

  transition: all .5s linear;

}

 ._13i6hfl3co000 .zz-comp-list__item:hover{

   transform: translateY(-10px)

}

._13i6hfl3co000 .zz-comp-list__item:hover >.zz-element-wrapper>.text .title, ._13i6hfl3co000 .zz-comp-list__item:hover >.zz-element-wrapper>.text .title > *{

  color: rgba(217, 37, 37, 1);

}

._13i6hfl3co000 .zz-comp-list__item>.zz-element-wrapper:hover{

  box-shadow: 0px 0px 14.25px 0.75px rgba(0, 0, 0, 0.15);

  transition: all 0.36s ease;

}

</style>

PS：由于这段代码是针对图文组件编写的，所以也只能对图文组件生效哦！

好了，今天的小教程就到这里了，我们下期再见吧！