JSFiddle - React, Tailwind, and code Playground

by PyccKuu

HTML

<table border="1">
<tr><td>
Version Nr.1
<ul class="reset dorams">
<li>
    <div class="li_poster"><a href="http://google.com" target="_blank"><img src="http://www.logodesignlondon.co.uk/wp-content/uploads/2013/12/google.jpg" alt="google" title="google"></a><span class="opt"></span>
 </li>
 </ul>
    </td><td>
Version Nr.2
<ul class="reset dorams">
<li>
    <div class="li_poster2"><a href="http://google.com" target="_blank"><img src="http://www.logodesignlondon.co.uk/wp-content/uploads/2013/12/google.jpg" alt="google" title="google"></a><span class="opt"></span>
 </li>
 </ul>
    </td></tr></table>

CSS

ul.dorams {
	overflow: hidden;
	margin: -5px -7px -5px -4px;
}
ul.dorams li {
	width: 192px;
	display: block;
	float: left;
	margin: 0 4px 5px 0;
	position: relative;
	overflow: hidden;
}

ul.dorams li .li_poster {
	padding: 4px 4px 1px 4px;
	border: 2px solid rgba(240, 240, 240, 1);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	position: relative;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
	box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
}
ul.dorams li .li_poster img {
	width: 180px;
	height: 150px;
}
ul.dorams li .li_poster span.rate {
	z-index: 2;
	display: block;
	font-size: 15px;
	padding: 5px 5px;
	position: absolute;
	bottom: 7px;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #b54545;
	background: #ff6161;
	right: 7px;
}
ul.dorams li:hover .li_poster span.opt {
	display: block;
	position: absolute;
	width: 180px;
	height: 150px;
	background: rgba(0,0,0,0.66) url(../images/plus_4.png) no-repeat center center;
	top: 4px;
	left: 4px;
	z-index: 3;
}
ul.dorams li:hover .li_poster:hover span.opt {
	background: rgba(0,0,0,0.66) url(../images/plus_3.png) no-repeat center center;
}

/*---V2---*/

ul.dorams li .li_poster2 {
	padding: 4px 4px 1px 4px;
	border: 2px solid rgba(240, 240, 240, 1);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	position: relative;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
	-webkit-box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
	box-shadow: inset 0px 0px 0px 1px rgba(212, 212, 212, 1);
}
ul.dorams li .li_poster2 img {
	width: 180px;
	height: 150px;
}
ul.dorams li .li_poster2 span.rate {
	z-index: 2;
	display: block;
	font-size: 15px;
	padding: 5px 5px;
	position: absolute;
	bottom: 7px;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 #b54545;
	background: #ff6161;
	right: 7px;
}