添加另一种形状与现有的图像叠加悬停效果

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

由于您没有发表您尝试使动画的原始效果，这是很难解释你做错了。

我在以下示例中添加了动画，在箭头上添加翻译并在悬停时删除它。转换decalration使两种状态之间的动画。

.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>

请注意，您将需要供应商前缀加到过渡和转换属性的浏览器支持（见canIuse为2D transform和transitions）

我也建议你阅读了关于transforms和transitions的MDN。