fade and text img when mouseover - html

Question

I am new to HTML and CSS, I have found out how to fade when mouseover, but when I mouseover, how can I add in text too? Here is my HTML and 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;
}
I want text to come in at the same speed as the background fade. Thanks guys

Answer 1

I'm not sure if I understand what you want, but I tryed something so you can take a look to this:
<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;
}

Answer 2

here are two way to perform this with css (jsfiddle setup for css) and jquery (jsfiddle setup for jquery). youi can use any way to perform
with css you need to add text in th like
<h2 class="heading">This is heading</h2>
and css will
h2.heading {
position: absolute;
bottom: 101px;
color: #fff;
opacity:0;
margin-left: 99px;
}
th:hover .heading
{
opacity:1;
}
with jquery
add this style
h2.heading {
position: absolute;
bottom: 101px;
color: #fff;
display:none;
margin-left: 99px;
}
and script
$(document).ready(function()
{
$('th').hover(function()
{
$(this).find('.heading').show();
})
})