<style>  
  .caption-top, .caption-bottom {  
color: #ffffff;
padding: 1.2em;
font-weight: bold;  
font-size: 13px;
font-family: arial;
cursor: default;  
border: 0px solid #334143;  
background: #000000;  
text-shadow: 1px 1px 0 #202020;  
  }  
  .caption-top {  
border-width: 0px 0px 8px 0px;  
  }  
  .caption-bottom {  
border-width: 8px 0px 0px 0px;  
  }  
  .caption a, .caption a {  
border: 0 none;  
text-decoration: none;  
background: #000000;  
padding: 0.3em;  
  }  
  .caption a:hover, .caption a:hover {  
background: #202020;  
  }  
  </style>  
  <script type="text/javascript" src="/js/captify.tiny.js"></script>  
  <script type="text/javascript">  
$(function(){  
$('img.captify').captify({  
// Скорость при наведении курсора  
speedOver: 'fast',  
// Скорость при отведении курсора  
speedOut: 'normal',  
// Задержка  
hideDelay: 500,
// Эффект анимации: 'fade', 'slide', 'always-on'  
animation: 'slide',
// Прозрачность подложки подсказки  
opacity: '0.30',
// css класс подсказки  
className: 'caption-bottom',
// Позиция подсказки (top или bottom)  
position: 'bottom'  
});  
  });  
  </script>

<img src="Ссылка на картинку" alt="Текст подсказки" width="Ширина" height="Высота" border="0" class="captify" >