megwoo
6/24/2015 - 5:27 AM

CSS Rollover Div with Fade In

.item {
	position: relative;
}

.item .thumb {
	cursor: pointer;
	width: 300px;
	height: 300px;
}

@-webkit-keyframes fadeIn {
    from {background: rgba(153, 153, 153, 0); }
      to {background: rgba(153, 153, 153, .46); }
}

@keyframes fadeIn {
    from {background: rgba(153, 153, 153, 0);  }
      to { background: rgba(153, 153, 153, .46); }
}

.item .thumb .content { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 300px; 
	height: 300px; 
	overflow: hidden;	
	display: none;
}

.item .thumb:hover > .content {
	display: block;
	-webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
	background: rgba(153, 153, 153, .46); 
}