تسمية توضيحية متحركة تحوم على الصورة

لمعاينة التأثير مرر الماوس على الصورة

Title Here.. Description Here...

كود الستايل
<!--Start Image Caption Css--> #image-hover { } #figure { position:relative; float:left; margin:10px; overflow:hidden; padding: 1px; } #figure:hover { -moz-box-shadow:0 0 20px rgba(0,0,0,0.75); -webkit-box-shadow:0 0 20px rgba(0,0,0,0.75); box-shadow:0 0 20px rgba(0,0,0,0.75); } #figure .caption { position:absolute; bottom:0; left:0; opacity: 0.75; margin-bottom:-115px; -webkit-transition: margin-bottom; -webkit-transition-duration: 400ms; -webkit-transition-timing-function: ease-out; -moz-transition-property: margin-bottom; -moz-transition-duration: 400ms; -moz-transition-timing-function: ease-out; -o-transition-property: margin-bottom; -o-transition-duration: 400ms; transition: margin-bottom; transition-duration: 400ms; transition-timing-function: ease-out; } #figure:hover .caption { margin-bottom:0px; } #image-hover .caption { width:100%; height:90px; padding:10px; background:#111; color:#fff; font-family: Arial, Helvetica, sans-serif; } #image-hover .caption b { text-shadow: 0px 2px 0px #000; } #image-hover .caption { color: #ddd; line-height: 24px; font-size: 14px; text-shadow: 0px 2px 0px #000; } <!--End Image Caption Css, Info : http://www.gooplz.blogspot.com -->



كود الآش ت م ل

<div id="image-hover"> <div id='figure'> <img src="رابط الصورة"/> <span class='caption'> <b>العنوان</b> وصف قصير للصورة </span> </div> </div>