добавить еще одну фигуру с эффектом на существующие изображения наложения парения эффекта

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>

Обратите внимание, что вам нужно будет добавить префиксы поставщика для перехода и преобразования свойств для поддержки браузера (см canIuse для 2D transform и transitions)

Я хотел бы также предложить вы прочитали на MDN около transforms и transitions.