HTML and CSS

Circular image

How does it work?

  • The width and height properties ensure the image is a square.
  • The border-radius: 50% property makes the image circular.
  • The background-size: cover property ensures the image covers the entire area without distortion

HTML

<div class="demo-preview">
 <div class="demo-outer">

   <div class="demo-inner"></div>
   <div class="demo-caption">A lion is called a 'king' obviously for a reason</div>
  
 </div>
</div>

CSS

.demo-outer {
  position: relative;
  height: 340px;
  background-image: url("image-02.jpg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
}

.demo-inner {
  position: absolute;
  top: -64px;
  left: 60px;
  background-image: url("image-01.jpg"); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 120px;
  width: 120px;
  border: 6px solid #ffffff;
  border-radius: 100px;
}