JSFiddle - React, Tailwind, and code Playground

by Arun Unnikrishnan

HTML

<body>
<div id="container">
        <div id="container_inner">
	<div id="container_txt">
	        <p><a href="#">WORLD OF WARCRAFT</a></p>
	        <p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p>
	</div>
        </div>
</div>
</body>

CSS

html, body {
	margin: 0;
	height: 100%;
	background-color: #575980;
}
#container {
	width: 200px;
	height: 300px;
	cursor: pointer;
	overflow: hidden;
	margin: 100px auto;
	border: 1px solid #333;
	background-color: #000;
	box-shadow: 0px 2px 8px #111;
}
#container_inner {
	opacity: .8;
	margin: auto;
	width: 200px;
	height: 300px;
	transition: .5s;
	position: relative;
	background-color: #FFF;
	background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
	background-size: 200% 100%;
	background-position: 60% 50%;
	box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
}
#container_inner:hover, #container_txt:hover {
	opacity: 1;
}
#container_txt {
	color: #fff;
	height: 0px;
	bottom: 0px;
	width: 200px;
	transition: .2s;
	position: absolute;
	font: normal 1em calibri;
	background-color: rgba(0, 0, 0, 0.7);
}
#container_inner:hover #container_txt {
	height: 100px;
	opacity: .6;
}
p {
	top: -5px;
	padding: 0px 10px;
	position: relative;
}
p a {
	color: #fff;
	text-decoration: none;
}
#p_txt {
	top: -15px;
	position: relative;
	font-size: 12px;
}