【CSS】鼠标悬停图文动画（初级版）

鼠标悬停图文动画

原理和工具

css

实现

Step 1. 设计布局

图片和文字都放在一个item容器中

<div class="item">
        <div class="img">
          <img src="图片地址" />
        </div>
        <div class="caption">
          <h3 class="title">标题</h3>
          <p>
   			段落文字
          </p>
        </div>
      </div>

Step 2. 调整文字和图片位置，使两者重合

.caption{
    //设置大小
  width:580px;
  height: 600px;
  position: relative;
    //调整位置
  margin-top: -600px;
  padding-right: 10px;
  padding-left: 10px;
  transform-origin: left;
  transform: rotateY('90deg');
  opacity:0;
  transition: 0.5s;
}

Step 3. 设置悬停动画

.item:hover .img{
  transform: rotateY('-90deg');
  opacity:0;
}
.item:hover .caption{
  transform: rotateY('0deg');
  opacity: 1;
}