Image hover transition for span - CSS

Question

<a href=""><img src=""><span>content</span></a> 

Здесь, когда я нахожусь на изображении, содержимое диапазона отображается с использованием положения относительно отображения none и абсолютного положения в теге span. Теперь, мой вопрос, когда я нахожусь на изображении, мне нужен эффект перехода. Для этого, что такое css. Пожалуйста, помогите мне.

Answer 1

Вы не можете транзитная элемент, имеющий display: none; к display: block; так для этого вам нужно использовать opacity свойство ...

Fails

Passes

Better Demo In Action

.example1 { 
    border: 1px solid #f00; 
    height: 30px; 
} 

.example1 span { 
    opacity: 0; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 

.example1:hover span { 
    opacity: 1; 
} 

Answer 2

Одна альтернатива пытается перейти между ан display:none и display:block

не переход, а не между visibility: hidden; и visibility:visible

См this article, который гласит:

видимость одушевляет несмотря на CSS Basic Box Model спецификации говорят «Animatable: нет»

Answer 3

a.tip2 { 
    position: relative; 
    text-decoration: none; 
} 
a.tip2 span {display: none; 
    opacity: 0; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    transition: all 1s; 
} 
a.tip2:hover span { 
    display: block; 
    position: absolute; 
    padding: .5em; 
    content: attr(title); 
    min-width: 120px; 
    text-align: center; 
    width: 162px; 
    height:auto;  
    top: -247px; 
left: 70px; 
    background: rgba(0,0,0,.8); 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px;  
    color: #fff; 
    font-size: .86em; 
opacity: 1; 
} 
a.tip2:hover span:after { 
    position: absolute; 
    display: block; 
    content: ""; 
    border-color: rgba(0,0,0,.8) transparent transparent transparent; 
    border-style: solid; 
    border-width: 10px; 
    height:0; 
    width:0; 
    position:absolute; 
    bottom: -16px; 
    left:1em; 
} 

Это мой css, и на самом деле я забыл сказать одно. Это подсказка с использованием чистого css.