列表中的CSS图像转换

我意识到这种编码应该是相对简单的，然而，我一直在研究，尝试和失败，所以希望得到一些帮助。我有一种挣扎的感觉，因为我把我的图片放在了一个列表中。这是我的代码

索引文件：

<div id="gallery" style="margin-top:-30px;">
    <ul>
        <li>
            <img src="images/IMG_2069mandapsmall.jpg"/>
            <span><img src="images/IMG_2069mandaplarge.jpg"/></span></li>
        <li>
            <img src="images/IMG_0014flowerssmall.jpg"/>
            <span><img src="images/IMG_0014flowerslarge.jpg"/></span></li>
        <li>
            <img src="images/IMG_2672garlandsmall.jpg"/>
            <span><img src="images/IMG_2672garlandlarge.jpg"/></span></li>
    </ul>
    </div>

基本上，我希望看到当你把鼠标悬停在小图像上时，大图像会慢慢出现。也许是某种渐变？如果能帮上点忙，我将不胜感激

笨蛋

更新： 好的，我已经修改了编码，并使用以下代码获得了淡入淡出效果：

ul li span img {
/*display: none;*/
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s;
}

ul li:hover span {
/*position: absolute;
top: 0;
right: 0;*/
}

ul li:hover span img{
/*display: inline;*/
opacity: 1;
}

---

现在唯一的问题是图像没有显示在我希望显示它们的页面上。当我尝试放置在位置：绝对时，不透明过渡效果不再正常工作。为什么会出现这种情况？

在css中，当hoveredI尝试使用不透明度从0到1的转换时，您可以使用这种转换，但不幸的是，它无法工作。一定是做错了什么。我在问题中所写的编码中是否可能包含一些编码？我真的很感激。我不相信你只用CSS就能达到那种效果，jQuery解决方案会令人满意吗？我对jQuery一无所知，但我很乐意尝试一下。我只是喜欢CSS的简单性。jQuery看起来相当复杂。我已经解决了位置的问题：绝对。基本上只是对索引文件中的每个图像进行了单独定位。可能不认为干净或脆，但它的工作。

ul li span img {
/*display: none;*/
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s;
}

ul li:hover span {
/*position: absolute;
top: 0;
right: 0;*/
}

ul li:hover span img{
/*display: inline;*/
opacity: 1;
}