مشکل در اضافه کردن متن روی عکس بهنگام hover [بایگانی]

siros1983

سه شنبه 19 آبان 1394, 16:12 عصر

سلام خسته نباشید

من کلی div دارم که توی هرکدوم یه تگ a و داخل این تنگ ها img وجود داره
حالا من یه span بهشون اضافه کردم و display :none گذاشتم
میخوام وقتی روی عکس hover میشه این span پایین عکس (روی خود عکس) نشون داده بشه

اینم کد کلی div

<div class="sub-menu vollyball">
<span class="sub-menu-title">والیبال</span>
<a href="#"><img src="../img/ico/volleyball.jpg" alt="والیبال" title="volleyball" /></a>
</div>

span.sub-menu-title{
display:none;
transition:all 1s ease-out;
}

div.sub-menu:hover span.sub-menu-title{
display:block;
position:absolute;
bottom:5px;
color:white;
font-weight:700;
background-color:black;
width:110px;
height:30px;
text-align:center;
}

با این کد تونستم انجامش بدم ولی وقتی روی span میرم از حالت لینک درمیاد چکار باید کرد؟
نمیخوام به تمام span ها دوباره لینک بدم چون اضافه کاری میشه

بعدشم این transition بنظرم کار نمیکنه مشکلی داره؟