JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pentru_border"><div class="eu_imagine"><?php $size = array(40,40);
					echo get_the_post_thumbnail($post_id, $size)?></div><div class="eu_post">
					<h2><a class="roll-link"><span >dfsdfsfdsfs</span></a></h2>
					<a href="<?php the_permalink(); ?>"><img  alt="erasmus plus"src="http://www.erasmus-plus.ro/wp-content/themes/Claudiu/arrow.png" 
					style="position: absolute; right: 2px; top:19px; width: 18px; height: 18px;" /></a></div></div>

CSS

<!--[if !IE]><!-->

.roll-link {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    perspective: 600px;
    perspective-origin: 50% 50%;
}
a{text-decoration: none;}
.roll-link span {
    display: block;
    position: relative;
    padding: 0px 2px;
    transition: all 400ms ease 0s;
    transform-origin: 50% 0% 0px;
    -webkit-transform-origin: 50% 0% 0px;
    -o-transform-origin: 50% 0% 0px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
	
	}
.roll-link:hover {
    text-decoration: none;
}
.roll-link:hover span {
    background: none repeat scroll 0% 0% #007B8C;
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -o-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

<!--<![endif]-->

JavaScript

.roll-link{display:inline-block;overflow:hidden;vertical-align:top}a{text-decoration:none}.roll-link span{display:block;position:relative;padding:0 2px;transition:all 400ms ease 0s}.roll-link:hover{text-decoration:none}.roll-link:hover span{}a{font-size:14px;color:#007B8C;word-wrap:break-word;line-height:25px;margin:0;padding:ine;background:none repeat scroll 0 0 transparent}0;border:medium none;outline:0 none;vertical-align:basel