Div in div hover

by redvirus13

HTML

<div id="thumb">
    <div class="thumb2"></div>
 <img src="http://www.eccentricshadows.com/wp-content/uploads/2011/08/futuristic-sci-fi-01.jpg">
    
</div>

CSS

#thumb {
    width: 300px;
    height: 300px;
    overflow: hidden; 
}

#thumb > img {
       max-height: 300px;
}


#thumb > .thumb2 {
	visibility:hidden;
}

#thumb:hover > .thumb2 {
	visibility:visible;
	width: 300px;
	height: 300px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-family: prime;
	font-size: 24px;
	text-align: center;
	position:absolute;
}