Kichik rasmlar (thumbnails)
Kichik rasm (thumbnail) yaratishni o‘rganing.
Kichik rasm (thumbnail)
Kichik rasm (thumbnail) — kattaroq rasmni ifodalaydigan (bosilganda ochiladigan) kichik rasm bo‘lib, uni ko‘pincha atrofidagi chegarasidan tanib olish mumkin:
Kichik rasm (thumbnail) qanday yaratiladi
<img> elementidan foydalaning va uni <a> elementi bilan o‘rang. Rasmga chegara bilan uslub bering va hover effektini qo‘shing:
Misol
<style>
img {
border: 1px solid #ddd; /* Gray border */
border-radius: 4px; /* Rounded border */
padding: 5px; /* Some padding */
width: 150px; /* Set a small width */
}
/* Add a hover effect (blue shadow) */
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest">
</a>
</body>
O‘zingiz sinab ko‘ring »
Rasmlarga qanday uslub berish haqida ko‘proq bilish uchun CSS rasmlar darsligimizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!