[JavaScript] Jquery nałożenie przezroczystego paska na zdjęcie. Opcje

[arzach]

Witam jak mogę osiągnąć taki efekt jak na


(IMG:http://www.fusion.boo.pl/pasek.JPG)



Chodzi o ten przezroczysty pasek na dole zdjęcia. Chciał bym nałożyć taki pasek na zdjęcie w którym będę mógł umieszczać informacje na temat zdjęcia. Zdjęcie nie zawsze morzę być takiego samego rozmiaru.

Prosił bym o wskazówki jak to wykonać. Nie chodzi mi o gotowca chciał bym sam takie coś zrobić sam od początku. Domyślam się że na początku musiał bym pobrać szerokość obrazka i potem na podstawie szerokości nałożyć div na obrazek.

[arzach]

Zrobiłem tak i

[PHP] pobierz, plaintext 
<style>
*{margin:0; padding:0}
        .foto {
            
            width:300px;
            height:150px;
            
        }
        .pasek {
            margin-top:-100px;
            height:100px;
            background-image: url(tlo.PNG);
            opacity:0.5;
            filter: alpha(opacity=50);
        }
</style>
 
<?php 
$rozmiar = getimagesize('test.jpg');
echo "
<div class=\"foto\">
<img src=\"test.jpg\" alt=\"\">            
        </div>
        <p class=\"pasek\" style=\"width:".$rozmiar[0]."px\">
test test test test test
        </p>";
?>
[PHP] pobierz, plaintext 

Działa przykład

http://www.fusion.boo.pl/pasek.php

Ale gdy już próbuje to dodać w panelu cms rozwala się cała strona
przykład
http://www.fusion.boo.pl/obr.php
jak mogę temu zaradzić ?