Untitled

<!doctype html>
<html lang="en">
  <head>
    <title>เพื่อนสนิท</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
        .img-box {
            display: inline;
        }
        img {transition: transform .3s;margin: 6px;border-radius: 3px;}
        img:hover {transform: scale(1.1);}
    </style>
</head>
  <body>
    <h1>เพื่อนสนิทของฉัน</h1>
    <a href="#" style=""><img src="https://dummyimage.com/300x300/000/fff" title="เพื่อนสนิทคนที่ 1" class="img-box" alt="เพื่อนสนิทคนที่ 1"></a>
    <a href="#" style=""><img src="https://dummyimage.com/300x300/000/fff" title="เพื่อนสนิทคนที่ 2" alt="เพื่อนสนิทคนที่ 2"><br></a>
    <a href="#" style=""><img src="https://dummyimage.com/300x300/000/fff" title="เพื่อนสนิทคนที่ 3" class="img-box" alt="เพื่อนสนิทคนที่ 3"></a>
    <a href="#" style=""><img src="https://dummyimage.com/300x300/000/fff" title="เพื่อนสนิทคนที่ 4" alt="เพื่อนสนิทคนที่ 4"></a>
  </body>
</html>