یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84 دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84
🎯 ثبت نام

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

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


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


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


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


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


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


مثال :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
 
 
                <button></button>



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

1
2
3
4
5
6
7
8
<p><h2>Thumbnail Image</h2><br>
<p>برای بزرگنمایی بر روی تصویر کلیک کنید</p></p>
 
  <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  

آموزش ساخت تصاویر کوچک Thumbnail
1400/01/19 4165 450
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...