まぁ内容的にはむちゃくちゃ簡単な話で、画像を円形に表示するというものです。

技術レベルとしては高くは無いですが、意外にまだまだ丸い画像を表示するのにペイントソフトでトリミングしてから貼ってる人がいるので書いておきたいと思います。
こういった円形の表現はスタイルシートで簡単にできてしまいます。

デモはこちら

CSSで円形にトリミングしよう

用意するのは通常の四角形の画像で構いません。
やり方はいろいろとあるんですが、今回はむちゃ簡単な背景画像を使った方法。

HTMLコードはたったこれだけです。

<div class="img_circle"></div>

このdivの部分に背景を入れて、形を円形に設定するだけです。

.img_circle {
  width: 200px;
  height: 200px;
  background: url(画像URL) no-repeat center;
  background-size: cover;
  border-radius: 100px;
}

超簡単でしたよね。
高さや幅、背景の位置やサイズなども指定していますが、
CSSなので、これらをうまく変更することでサイズやトリミングの位置など後からでも自由自在です。
画像の差し替えも、トリミングなどなしで行えます。

どうですか、非常に簡単です。

円形の中だけが拡大されるアニメーション

CSSなどでこういったことをすると、アニメーションなどで面白いこともできます。

デモページ

の３つめの画像にマウスを合わせると拡大するアニメーションができます。
こういうことは、ペイントソフトで加工した画像ではできませんよね。

一応ソースコード

<div class="img_circle move"></div>

.img_circle {
  width: 200px;
  height: 200px;
  background: url(https://y-com.info/contents/wp-content/uploads/2017/05/IMG_7073_s.jpg) no-repeat center;
  background-size: auto 100%;
  border-radius: 100px;
}
.img_circle.move {
  transition: all 0.5s linear;
}
.img_circle.move:hover {
  background-size: auto 130%;
}

こんな感じで。

いかがでしたか。
今回は非常にシンプルな話でしたが、これからはこういった比較的簡単なものも紹介していければと思ってます。