Почему свойство перехода не работает в этом случае?

Question

.pic{
	position: relative;
}

.pic .texthover{
	position: absolute;
	bottom:3%;
	display: none;
	z-index: 8000;
	margin: 0 0 3.2px 0;
	width: 100%;
	text-align: left;
	padding: 5px;
	background: rgba(213,12,16,1.00);
	border-bottom: 1px solid white;
	transition: all 2s ease;
}



.pic:hover .texthover{
	display: block;
	
	  
}

<ul class="list-images">
				<li>
					<a href="#">
					<div class="pic">
					<img src="1 escultura.fw.png" width="278" height="175" title="Esculturas del Prado"                       class="image"/>
					
						<div class="hover" style="">
							<p class="texthover">  Escultura neoclasicista hasta el XVII</p>
						</div> <!--END DIV HOVER-->
					</div>	<!--END DIV PIC-->
					
				
				</li> 

Я ломал голову над этим, это, должно быть, очень простая деталь, которая ускользает от моего понимания, кто-нибудь может указать на это ??? Спасибо всем. Я поместил свойство перехода в исходный элемент и все еще не работает ...

Answer 1

Ванильный пример перехода и как он работает. Вы можете изменить в соответствии с требованиями.

div.list-images a:hover {
    transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear; /* Firefox 4 */
    -webkit-transition: background-color 0.5s linear; /* Safari and Chrome */
    -o-transition: background-color 0.5s linear; /* Opera */
    -ms-transition: background-color 0.5s linear; /* Explorer 10 */
    background:#ff0000;
}

<div class="list-images"><a href="#" id="ctudeal">transition</a></div>