JSFiddle - React, Tailwind, and code Playground

HTML

<div style='width: 330px;float:left;padding:10px;'>
			<div class='riddle-item riddle-item--gold'>
				<div style='background-color: red;height:100px;'>
							
								<div style='text-align:center;'>Back</div>
								

				</div>
								<a class='riddle-item-link riddle-item-link--gold' href='#'>
									<div class='riddle-item-link-logo'>
										Front
									</div></a>
			</div>
		</div>

CSS

.riddle-item{overflow:hidden;position:relative;color:#fff;cursor:pointer}
.riddle-item:hover .riddle-item-link{left:0}
.riddle-item-link{border:transparent 3px solid;position:absolute;z-index:2;left:100%;top:0;height:100%;width:100%;text-align:center;-webkit-transition:left .2s ease-in-out;-moz-transition:left .2s ease-in-out;-ms-transition:left .2s ease-in-out;-o-transition:left .2s ease-in-out;transition:left .2s ease-in-out;cursor:pointer;text-decoration:none!important;justify-content:center;align-items:center}
.riddle-item-link--gold{border-color:#86693d;background-color:#514025}