JSFiddle - React, Tailwind, and code Playground

by mbardauskas

HTML

<body>
    <!-- test content -->
    <div class="maincontent">
        <div class="boxtest">350 x 150</div>
    </div>
    <!-- /test content -->
        
    
    <div class="overlay">
        <img src="http://placehold.it/350x150" alt="" />
    </div>
</body>

CSS

/* test css */
body {
    margin: 0;
    padding: 0;
}
.boxtest {
    background: #ccc;
    color: #999;
    font-size: 20px;
    line-height: 150px;
    margin: 0 auto;
    text-align: center;
    width: 350px;
}
/* /test css */

/* overlay css */
.overlay {
	background: red;
	position: fixed;
	width: 20px;
	height: 20px;
	left: 50%;
	opacity: 0.6;
	filter: alpha(opacity=60);
	top: 0;
	z-index: 800;
}
.overlay img {
	display: none;
}
.overlay:hover {
	position: absolute;
	margin-left: -175px; /* half width of the images */
	top: 0;
}
.overlay:hover img {
	display: block;
}