How To Add Inner Borders to Images

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>

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

</style>

Note:You can change border color,border size,margin,... But both border size and margin must have a same numerical value.

4.Now add your images as below.

<div id="inner-borders">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_KyuKqbR7W1rwzssPZkX2qu-OUnKgn_hKN9F6caDWZMzKUJq4Pgfyr-WbyH9lfCf_tW-BG59lKPg8jdXnDhuukqeRQFq2DWMJU_XEpjo0P4ZjJegHHcz9Vn0TrnIk90JA5_kideho35Ac/+1+small.jpg" alt="#" /></a>

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

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbqLZ2ltqoGRrt0il-zi6UAH08bRXogCAeOyEqjltbodcBvxzzIsjKlKr2CMmvNWfwEDWpcq8VjoxgUr6vc-JRK8Kyqp0_t7DLzcfnHIq4LnL3HFVHZ_a9JwgNyR6YktMby-ms2GVCazt3/+3+small.jpg" alt="#" /></a>

</div>

Now click Save

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

Relax and enjoy, don't be rush.

Related Post