Home/ Questions/Q 3498808
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:32:05+00:00

I like to have the title tag caption over a float list of image…

  • 0

I like to have the title tag caption over a float list of image…
i have manage to make some jquery to get and do the cation
but the placement or the css dont work…

maybe my “base” is wrong…. HELP

this is the page: http://pfibco.ca/04-accessoires-fra.php?lang=fra

and this is the inspiration link

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i found the proper answer here

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Make Nice Captions Using Image Alternative Tag</title>
  <style>
    /* Style wrapping elements */
    .caption {position: relative; display: block;}
    .caption div {position: absolute; padding: 5px; bottom: 0; text-align: center; line-height: 150%; color: #ffffff; background: #000000;}
  </style>
</head>

<body>
  <h1>Make Nice Captions Using Image Alternative Tag</h1>
  <img src="path to the image goes here" alt="Here goes the alternative text which pops out on hover" />
</body>

</html>

    and or the jquery part : 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // Wrap up images
  $('img').each(function() {
    $(this).wrap('<div class="caption"></div>').after('<div>' + $(this).attr('alt') + '</div>');
    $('.caption').width($(this).width()).children('div').each(function() {
      $(this).css({width: $(this).siblings('img').width(), opacity: 1, display: 'block'});
    });
  });
});
</script>
    • 0