Html 将转换应用于悬停时处于div中的跨度

我在

div:hover

上显示的图像底部有标题。但是,

div:hover上显示的跨度立即出现，尽管它具有转换属性。 在chrome的开发工具中检查该元素后，似乎转换已正确应用于该元素，但效果仍然是即时的。我不确定问题是什么，但我希望通过css实现这种效果

请在此处签出图像示例：

html:

---

显示

不是转换的首选项。但是，您可以为此使用

不透明度

：

span {
    position: relative;
    bottom: 1.4em;
    display: block;
    color: white;
    background: black;
    text-align: center;
   /* display:none;*/
    opacity: 0;
    -webkit-transition: all 1.25s ease-out;
    -moz-transition: all 1.25s ease-out;
    transition: all 1.25s ease-out;
}
div:hover span {
    opacity: 1;
    /*display: block;*/
}

---

谢谢我刚刚在小提琴上发现了这一点。在没有js的情况下，是否可以转换显示效果？你是什么意思？你想要什么样的效果？因为

显示：无没有实际效果。
* {
    margin: 0;
    padding: 0;
}
div {
    display: inline-block;
     -webkit-transition: all 1.25s ease-out;
    -moz-transition: all 1.25s ease-out;
    transition: all 1.25s ease-out;

}
span {
    position: relative;
    bottom: 1.4em;
    display: block;
    color: white;
    background: black;
    opacity: 0.7;
    text-align: center;
    display:none;
    -webkit-transition: all 1.25s ease-out;
    -moz-transition: all 1.25s ease-out;
    transition: all 1.25s ease-out;
}
div:hover span {
    display: block;
}

span {
    position: relative;
    bottom: 1.4em;
    display: block;
    color: white;
    background: black;
    text-align: center;
   /* display:none;*/
    opacity: 0;
    -webkit-transition: all 1.25s ease-out;
    -moz-transition: all 1.25s ease-out;
    transition: all 1.25s ease-out;
}
div:hover span {
    opacity: 1;
    /*display: block;*/
}