css - 添加另一个对现有图像叠加悬停效果有影响的形状

Question

我有这个代码:https://jsfiddle.net/e0u4sow1/6/

有效，当您将鼠标悬停在图像上时，我在文本下方添加了一个箭头。我希望该箭头从左侧滑入中心并缓慢结束，当您将鼠标移开以缓慢开始向右滑动时。我现在花了 2 个小时尝试很多事情来让它工作，但我放弃了。有人可以帮我弄这个吗？也可能是关于代码中的哪一部分使箭头滑入和滑出的小解释？我删除了所有与arroweffect关系的代码，所以它只是添加了箭头的原始效果

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.media__image {
  display: block;
}
.media__body {
  background: rgba(41, 128, 185, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3.75em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body:hover {
  opacity: 1;
}
.media__body:after,
.media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}
.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.media__body h2 {
  margin-top: 0;
}
.media__body p {
  margin-bottom: 1.5em;
}
.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #FFF inset;
  transform: rotate(135deg);
}

<h1>MR Cube</h1>
<div class="media">
  <a href="http://www.google.nl/">
    <img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
    <div class="media__body">
      <h1>Lees meer</h1>
      <div class="arr"></div>
    </div>
  </a>

Answer 1

由于您没有发布制作动画的尝试，因此很难解释您做错了什么。

我在下面的示例中制作了动画，在箭头上添加了翻译并在悬停时将其移除。过渡贴标使两种状态之间的动画。

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.media__image {
  display: block;
}
.media__body {
  background: rgba(41, 128, 185, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3.75em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body:hover {
  opacity: 1;
}
.media__body:after,
.media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}
.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.media__body h2 {
  margin-top: 0;
}
.media__body p {
  margin-bottom: 1.5em;
}
.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #FFF inset;
  transform: translateX(250px) rotate(135deg);
  transition: transform .8s ease-in;
}
.media__body:hover .arr {
  transform: translateX(0) rotate(135deg);
  transition-timing-function: ease-out;
}

<div class="media">
  <a href="http://www.google.nl/">
    <img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
    <div class="media__body">
      <h1>Lees meer</h1>
      <div class="arr"></div>
    </div>
  </a>

请注意，您需要将供应商前缀添加到转换和转换属性以获得浏览器支持(请参阅 2D transform 和 transitions 的 canIuse)

我还建议您在 MDN 上阅读有关 transforms 的内容和 transitions .