آموزش ساخت تصاویر کوچک Thumbnail

در این مقاله می آموزید که چطور با استفاده از CSS و Html تصویر کوچک ( بند انگشتی) ایجاد کنید.

تصویر کوچک ( بند انگشتی )

تصویر کوچک ، تصویری است که هنگامی که بر روی آن کلیک کنید تصویر بزرگتر را نشان میدهد و اغلب توسط حاشیه های اطراف آن مشخص میگردد.

چطور یک تصویر کوچک ایجاد کنیم

از مولفه img استفاده کنید و مولفه a را قبل و بعد از آن قرار دهید.توسط border به تصویر فرم دهید و افکت هاور را به آن اضافه کنید:

مثال :

<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>
 
 
<a target="_blank" href="http://articles.tahlildadeh.com/image.axd?picture=webads.jpg">
  <img alt="web-design" data-src="http://articles.tahlildadeh.com/image.axd?picture=webads.jpg">
</a>
 
 
                <button></button>

نمونه مثال Thumbnail Image:

<p><h2>Thumbnail Image</h2><br>
<p>برای بزرگنمایی بر روی تصویر کلیک کنید</p></p>
 
<p><a target="_blank" href="http://articles.tahlildadeh.com/image.axd?picture=webads.jpg"><br>
  <img src="http://articles.tahlildadeh.com/image.axd?picture=webads.jpg" alt="web-design" style="width:150px"><br>
</a><br>
 </p>
<button></button>

امتحان کنید

خروجی Thumbnail Image

آموزش قرار دادن عکس در وسط صفحه نحوه ی اضافه کردن border به تصاویر

1400/01/19 4165 450

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما