JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rt_tilewrap">
    <a href="www.google.com">
        <div class="rt_imgwrap">
            <div class="rt_tileoverlay"></div>
            <img class="rt_timg" src="http://i.imgur.com/cepjcsGb.jpg" /> 
         </div>
    </a>
    <div class="rt_tiletext">
        <p>wards are focused oni wards are focused oni wards ards are focused oni wards areds are focused oni wards are focused oni wards are focused oni wards are focused oni wards are focu wards are focused i .</p>
    </div>
</div>

CSS

.rt_tilewrap {
		padding: 10px;
		display: inline-block;
		text-align: left;
    	vertical-align: top;
		background: rgba( 22, 255, 22, 0.3);
        width:355px;
	}

	.rt_tiletext {
		padding: 5px 0 5px 0;
		color: #666666;
		float:left;
		line-height: 1.1em;
		text-align: justify;
    	display: block;
        background:skyblue;
	}

    .rt_tiletext p{
        padding: 0;
        margin: 0;
    }
	.rt_timg {
		width: 100%;
		height: auto;
		display:block;
		position: relative;
		float:left;
	}

    .rt_imgwrap{
        overflow:hidden;
    }

	.rt_tileoverlay {
		height: 100%;
		width: 0;
		color:white;
		overflow:hidden;
		position: absolute;
		background-color: rgba(255, 255,0,  0.5);
		transition: all 0.4s ease-in-out;
		position: margin-top: 0px;
		margin-left: 0px;
		-webkit-transition: all .4s ease;
		-moz-transition: all .4s ease;
		-ms-transition: all .4s ease;
		-o-transition: all .4s ease;
		transition: all .4s ease;
		z-index: 100;
	}

	.rt_imgwrap:hover > .rt_tileoverlay {
	     width:355px;
	}