html - 鼠标悬停时淡入淡出并显示文本 img

Question

我是 HTML 和 CSS 的新手，我发现了如何在鼠标悬停时淡入淡出，但是当我将鼠标悬停时，我该如何添加文本呢？这是我的 HTML 和 CSS:

HTML:

<div class="showTeams">
    <p>Please, select a team you'd like to view:</p>
    <table class="center">
        <tr>
            <th>
                <div class="tZ"> <a href="#">

                    <img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>

                </a>

                </div>
            </th>
            <th>
                <div class="zC"> <a href="#">

                    <img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>

                </a>

                </div>
            </th>
        </tr>
    </table>
</div>

CSS:

.tZ {
    display:inline-block;
    background:#000;
}
.zC {
    display:inline-block;
    background:#000;
}
.item-fade {
    vertical-align:top;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
    opacity:0.2;
}

我希望文本以与背景淡入淡出相同的速度进入。谢谢大家

Answer 1

我不确定我是否明白你想要什么，但我尝试了一些东西，所以你可以看看这个:

<div class="showTeams">
    <p>Please, select a team you'd like to view:</p>
    <table class="center">
        <tr>
            <th>
                <div class="tZ"> <a href="#">

                    <img id="tz" src="../images/teamZeus-pic.png" class="hover item-fade" alt="team Zeus" title="team Zeus"/>

                </a>

<div id="hover-content">
        Text shows only on mouseover
</div>
                </div>
            </th>
            <th>
                <div class="zC"> <a href="#">

                    <img src="../images/zeusCreations-pic.png" class="hover item-fade" alt="zeus Creations" title="zeus Creations"/>

                </a>

                </div>
            </th>
        </tr>
    </table>
</div>

CSS:

.tZ {
    display:inline-block;
    background:#000;
}
.zC {
    display:inline-block;
    background:#000;
}
.item-fade {
    vertical-align:top;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hover:hover {
    opacity:0.2;
}

#hover-content {
    color: white;
    display:block;
}
.tZ:hover #hover-content {
    display:none;
}