⚠️ Pozor: obrázky z tohoto příspěvku se ztratily při výpadku v roce 2016. Chybějící obrázky nahradí automaticky vtipným placeholderem plugin Broken Image Placeholder.
Právě jsem nad tím strávil opět velmi drahnou dobu, a nakonec po nekonečném googlení v řádu hodin jsem objevil skutečně fungující řešení.
Jediné 2 “speciální” techniky které toto řešení využívá je z-index a absolutní pozicování:
Kód HTML:
XML
<!--
První obrázek má ikonku složky - soubor tnFolder.png je průhledný(až na žlutou složku samozřejmě) ve velikosti 150x84. -->
<div>
<img alt="Obrazek 1" class="tnFile" src="http://jepsano.net/i/Kocicky/1/Kocicka/Kocicka1/P1020033.jpg">
<div>
<a href="Photo.aspx?pid=1">
<img alt="t" src="http://jepsano.net/i/tnFolder.png">
</a>
</div>
<div>Popis obrazku 1</div>
</div>
<!-- Druhý obrázek nemá ikonku složky, proto v něm vynechávám absolutně pozicovaný div -->
<div>
<a href="Photo.aspx?pid=1">
<img alt="Obrazek 2" class="tnFile" src="http://jepsano.net/i/Kocicky/1/Kocicka/Kocicka1/P1020038.jpg">
</a>
<div>Popis obrazku 2</div>
</div>Kód CSS:
CSS
.tnBox
{
position: relative;
display: inline-block;
vertical-align: top;
}
.tnFile
{
/*width a height jsou pouze k tomu, když obrázky nemáte ve stejné velikosti a/nebo je máte ve větší velikosti než chcete*/
width: 150px;
height: 84px;
z-index: 1;
}
.tnFolder
{
position: absolute; top: 0; left: 0; z-index: 2;
}
.tnDesc
{
width: 150px;
max-width: 150px;
font-size:smaller;
padding: 0;
padding-bottom: 10px;
text-align: center;
}
Enjoy!