Почему при первом наведении мыши overlay отображается не на картинке, при наведении еще раз — все ок?

Question

[Петр Волханов]

Почему при первом наведении мыши overlay отображается не на картинке:



при наведении еще раз - все ок?



Код CSS:

#top .grid-entry .image-overlay {
	background: rgba(0, 0, 0, .90)!important;
}

.grid-entry a:hover:before{
	content: attr(title);
	position: absolute;
	width: 100%;
	z-index: 1000;
	text-align: center;
	opacity: 1;
	font-size: 18px;
	color: #ffffff !important;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
	animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
}