add another shape with effect on existing image overlay hover effect - css

Question

I have this code: https://jsfiddle.net/e0u4sow1/6/
It works, I added a arrow beneath the text when you hover over the image. I want that arrow to slide in from the left to the center with a slow end and when you move your mouse away to slide right with a slow start. I spend 2 hours now trying many things to get this to work, but I give up. Can someone help me with this? also maybe a small explanation as to what part in the code makes the arrow slide in and out? I removed all code with arroweffect relations, so it's just the original effect with the arrow added
.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

As you didn't post your try to make the animation, it's hard to explain what you did wrong.
I made the animation in the following example adding translate on the arrow and removing it on hover. The transition decalration makes the animation between both states.
.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>
Note that you will need to add the vendor prefixes to the transition and transform properties for browser support (see canIuse for 2D transform and transitions)
I would also suggest you read up on MDN about transforms and transitions.