Εσωτερικά πλαίσια στις εικόνες - Inner borders to images

• Σύνδεση στον Blogger
• Σχεδίαση / Επεξεργασία HTML
• Βρείτε την ετικέτα </head>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<style type='text/css'>

#inner-borders a img, #inner-borders a { border: none; overflow: hidden; float: left; }
#inner-borders a:hover { border: 3px solid #ff0000; }
#inner-borders a:hover img { margin: -3px; }

</style>

• Μπορείτε να αλλάξετε το χρώμα του πλαισίου στο κίτρινο φόντο του κώδικα.
• Αποθηκεύστε το πρότυπό σας.
• Για να χρησιμοποιήσετε αυτό το Trick χρησιμοποιήστε τον παρακάτω κώδικα:

<div id="inner-borders">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYmDTNdyexVm6LNVMmuAxoeSpdq4ElZzYMjgY8NkMNIST_gNLnbzup0UN9l1nFYoiEhwbUwQedytqha50Cpbs4CkLUK5hkvf2e3V3TsgI252jlkyVO64g5egn56_ZNKu5Q7C1QOvJvPCpL/+1+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLCRYjKcjFU9orTNCD2adNBKe2hsm9ibKIKjwjXiWsL2B-QHEHziCMTyg4bsZL06TSqH2fjz8wjmbI4fbNpAXPVyMtNUhZOR0RQSP9TJ2y5B_oy4FL6bDmixUrYiHVZ9Q63YD5UmZmn4It/+2+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMdo2Vl2m6fgxInBYEA84fpo22478O19xjrGa2KlOKyE5C56yjid6GpHZmCCCMvwTPKC2n0HpMXE8BPA5hv8wfEABdNc5Sdd-wwIb_CBnrcqOBLE2G22RBAOgQU-mvSiZcPGhnv9tBJ2vn/+3+small.jpg" alt="#" /></a>

</div>

• Βάλτε στο κίτρινο φόντο τα link των δικών σας εικόνων στο συγκεκριμένο μέγεθος και στη θέση της δίεσης το URL που θα οδηγεί η εικόνα μόλις κάνουμε κλικ πάνω της.