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'>
 
#outer-borders a img, #outer-borders a  { border: none; float: left; }
#outer-borders a { margin: 3px; }
#outer-borders a:hover { outline: 3px solid #0000ff; }
 
</style>

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

4.Now add your images as below.

<div id="outer-borders">
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO1jNZGtEbXrELNVjsUxZ9e4HrMbvFwqoaNHIg_S-s2Ud94_BM0qFLRQMz43eRsfrbZt33RzYBazxdoq3gtsTYb_DxpohMuPnQ8ONC0TqWxuTeljOrZl0lU2kt_W-oi3iIn0K1-_R1HdM9/+1+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EthoNK0hDSC0yDkIYH3a8zdXTv5kQ6livwBYd1Ij7sDgD9-LmsBdYyunpnqLTJssdZVAPvbUMWBvczY79Z6eDtUGNm-Vy6fmN6nwq8t1RcGdLzXYLxCrddoodaNfFNhCtDDE_3xeCR5p/+2+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv7AwGiX9fq8rsdaA1CzPzgxlDrXGV0BHFljK0avUXcCRfhRxT6tVMfBoIi6m8bAsUpDfiIAMtLu3CZGTiY8VzC8d4kX0wLEuvE20flH5PrHOHGyKVmrwTtnViq2AeUM9V4l7Dbf1ml8Jc/+3+small.jpg" alt="#" /></a>     
  
</div>

You are done.