<style type="text/css">
.thumbnail{
الموقف: نسبي؛
مؤشر z: 0;
}
.thumbnail:hover{
لون الخلفية: شفاف؛
مؤشر z: 50؛
}
.thumbnailspan{ /*CSS للصورة المكبرة*/
الموقف: مطلق؛
لون الخلفية: أصفر فاتح؛
الحشو: 5 بكسل؛
اليسار: -1000 بكسل؛
الحدود: 1 بكسل رمادي متقطع؛
الرؤية: مخفية؛
اللون: أسود؛
زخرفة النص: لا شيء؛
}
.thumbnailspan img{ /*CSS للصورة المكبرة*/
عرض الحدود: 0;
الحشو: 2 بكسل؛
}
.thumbnail:hoverspan{ /*CSS للصورة المكبرة عند التمرير*/
الرؤية: مرئية؛
أعلى: 0؛
اليسار: 60 بكسل؛ /*الموضع الذي يجب أن تتم فيه إزاحة الصورة المكبرة أفقيًا */
}
</style>
<a class="thumbnail" href="#thumb"><img src=" " /><br />جميلة بكل بساطة.</span></a>
<a class="thumbnail" href="#thumb" ><img src=" " /><br />حقيقي للغاية، وغير واقعي. أم هو كذلك؟</span></a>