PURE CSS HOVER

hover.tpl.php

<a class="past-projects-card" href="/node/<?php print $fields['nid']->content ?>" style="background: url(<?php print $fields['field_exhibition_image']->content ?>) center center/cover;">
	<div class="show-project-details">
		<?php print $fields['title']->content ?>
		<?php print $fields['field_artist_group']->content ?>
		<?php print $fields['field_project_date']->content ?>
	</div>
</a>

pure_css_hover.scss

.past-projects-card{
	display: block;
    padding: rem-calc(132) 2rem;
    max-width: rem-calc(800);
    margin: 0 auto;
    margin-top: 2rem;
    max-height: rem-calc(264);
    opacity: 0.5;
    transition: opacity 0.35s, transform 0.35s;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
}

a.past-projects-card > div.show-project-details{ 
	opacity: 0; 
	transform: translate3d(-36px,0,0); 
	transition: transform 0.35s, opacity 0.35s; 
}

a.past-projects-card:hover,
a.past-projects-card:focus{ opacity: 1;}

a.past-projects-card:hover > div.show-project-details,
a.past-projects-card:focus > div.show-project-details{ 
	display: inline-block; 
	background: rgba(255,255,255,0.9);
	padding: 1rem;
	transform: translate3d(0,0,0);
	opacity: 1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	h3{ 
	background: none; }
	section{  
	background: none; }
}