JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div class="hover-img-vertical-bigborder">
    <img src="http://1.bp.blogspot.com/-BNkayp7vphQ/UEmx3WTwe1I/AAAAAAAAELg/eHu4hWtoXbk/s1600/desktop-wallpaper-29.jpg" style="left: -50%;"/>
        <div class="text">
            <h1>Some Text Here<br/>AAA</h1>
        </div>
   </div>
</section>

CSS

.hover-img-vertical-bigborder{
	position: relative;
	width: 50%;
	height: auto;
	border: 15px solid white;
	outline: 1px solid #c8c8c8;
	float:left;
	margin-left: 11px;
	display: table;

	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;

	overflow: hidden;
}

.hover-img-vertical-bigborder:hover{
	height: 380px;
	margin-top: -15px;
}

.hover-img-vertical-bigborder img{
	position: absolute;
}

.hover-img-vertical-bigborder .text{
	width: 100%;
	display: table-cell;
   	vertical-align: middle;
    position:relative;
}

.hover-img-vertical-bigborder .text h1{
	width: 100%;
	text-align: center;
	color: white;

	font-size: 18px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	line-height: 25px;

	text-shadow: 1px 1px 0px #030303;
    filter: dropshadow(color=#030303, offx=1, offy=1);
}