How to add description while hover an image in lightbox view Fancybox

I want display the image description and want to play a audio on hover of the image. I have attached an image file of my expected output. this output popup will come when i hover the lighbox image.

here is my code

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div class="container">
    <div class="row">
        <div class='list-group gallery'>
            <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
            <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
            <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
            <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
            <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
            <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
            <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
    </div> <!-- list-group / end -->
</div> <!-- row / end -->

<style type="text/css">
.gallery
{
display: inline-block;
margin-top: 20px;
}
</style>
<script type="text/javascript" >

$(document).ready(function(){
//FANCYBOX
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
    openEffect: "none",
    closeEffect: "none"
});
});


</script>

Solution

Try using the 'title' attribute to add the description for the audio. For example:

  <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. ">

The below JS will display the description on hover and will autoplay the audio file.

$(document).ready(function(){
    $('.fancybox').fancybox({
       helpers: {
       title : {
        type : 'over'
       }
      },
      afterShow : function() {
       $(".fancybox-title").hide();
       $(".fancybox-wrap").hover(function() {
         $(".fancybox-title").stop(true,true).slideDown(200);

         var toolbar = $("<div/>").addClass("audiofile");

        toolbar.html(" <audio autoplay='autoplay' controls='controls'><source src='https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3' /></audio> ");
        $(".fancybox-title").after(toolbar);


        }, function() {
         $(".fancybox-title").stop(true,true).slideUp(200);
         $(".audiofile").remove();
       });
      }

     });
});

Then, you can use the below CSS to style the content:

.fancybox-opened .fancybox-title{
  background: #fff;
  color: #000;
  border: 18px solid #000;
  width: 100%;
  margin-bottom: 98px;
 }

.audiofile{
  border: 10px solid #000;
  padding: 14px;
  position: relative;;
  top: -98px;
}