कैसे करें - थंबनेल
थंबनेल इमेज बनाने का तरीका जानें।
थंबनेल छवि
एक थंबनेल एक छोटी छवि है जो एक बड़ी छवि का प्रतिनिधित्व करती है (जब उस पर क्लिक किया जाता है), और अक्सर इसके चारों ओर एक सीमा के साथ पहचाना जाता है:
थंबनेल इमेज कैसे बनाएं
एक <img> तत्व का उपयोग करें और इसके चारों ओर एक <a> तत्व लपेटें। छवि को बॉर्डर के साथ स्टाइल करें और होवर प्रभाव जोड़ें:
उदाहरण
<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>
छवियों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे सीएसएस इमेज ट्यूटोरियल पर जाएं।