CSS & JS Effect – Image hover animation

效果

效果来自: webflow 的一个模板

 

需求解释

有 3 给元素, 图片, overlay(黑影), link

mouse enter 的时候,

图片要 zoom in.

overlay 要 fade in.

link 要 slide up

mouse leave 的时候, 图片 zoom out 的速度比 zoom in 快.

 

HTML 结构

<div class="container">
  <img src="./images/img1.jpg" />
  <div class="overlay"></div>
  <div class="text-wrapper">
    <a href="#">Click here know more</a>
  </div>
</div>

大致思路:

container 负责整体的 width, heigth

图片覆盖整个 container. 等下 scale 的时候, container 要 overflow: hide.

overlay 绝对定位覆盖图片之上. 一开始 opacity, mouse enter 才出现.

text-wrapper 是为了 slide up 效果. link 通过 transform translate 躲在 wrapper 下面. (wrapper overflow hidden).

 

CSS Style

给 container 一个 size

.container {
  width: 613px;
  height: 461px;
}

给图片一个 size

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

效果

给 overlay 一个颜色, 和定位

.container {
  position: relative;
}
.overlay {
  background-color: rgba($color: black, $alpha: 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 效果

给 text-wrapper 定位居中

.text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  a {
    color: white;
    text-decoration: underline;
  }
}

效果

隐藏 overlay 和 link

.overlay {
  opacity: 0;
}

.text-wrapper {
  overflow: hidden;
  a {
    display: inline-block;
    transform: translateY(100%);
  }
}

效果

hover 时图片 zoom in/out

.container {
  overflow: hidden;
}
img {
  transition: transform 0.5s ease;
}
.container:hover {
  img {
    transition: transform 1s ease-in-out;
    transform: scale(1.2);
  }
}

效果

hover overlay 出现

.overlay {
  transition: opacity 0.5s ease;
}
.container:hover {
  .overlay {
    opacity: 1;
  }
}

效果...等下一起看吧.

hover slide up link

.text-wrapper {
  a {
    transition: transform 0.5s ease;
  }
}
.container:hover {
  .text-wrapper {
    a {
      transform: translateY(0);
    }
  }
}

效果

Final CSS Style

.container {
  width: 613px;
  height: 461px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 1s ease;
  }

  position: relative;
  .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba($color: black, $alpha: 0.3);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease;
  }

  .text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    a {
      display: inline-block;
      color: white;
      text-decoration: underline;
      transform: translateY(100%);
      transition: transform 0.4s ease;
      opacity: 0.8;
    }
  }

  &:hover {
    img {
      transition: transform 1.2s ease-out;
      transform: scale(1.2);
    }
    .overlay {
      opacity: 1;
    }
    .text-wrapper {
      a {
        transform: translateY(0);
      }
    }
  }
}