JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div class="cdxbox">
	
		<div class="details">
			<a href="#"><h2>Coming Soon</h2></a>
		</div>
		
		<img src=" http://placehold.it/350x350" alt="#" />
		
	</div>

CSS

/* Fade in/out effect */

div.cdxbox {
	width: 50%;
	height: 100%;
	float: left;
	position: relative;
}

div.cdxbox img {
	width: 100%;
	height: auto;
}


/* center text horizontally/vertically */

div.cdxbox div.details h2 {
	top: 3%;
	position: absolute;
	text-align: center;
	width: 100%;
    color:#fff
}

div.cdxbox div.details a {
	display: block;
	height: 100%;
	width: 100%;
}


						

div.cdxbox .details {
position:absolute;
top:33%;
left:0;
width: 100%;
height: 30%;
background:#4d4d4d;

color: #fff;
opacity: 0;


/* Fade out */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 250ms;

-ms-transition: opacity;
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 250ms;

-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;

-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}



div.cdxbox .details:hover {
opacity: 1;

/* Fade in */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 250ms;

-ms-transition:opacity;
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 250ms;

-moz-transition:opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;

-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1050ms;
}



/* /fade end */