Image Aspect Ratio Concepts - 2 & Image inside circle

image-aspect-ratio-concepts-2-image-inside-circle.markdown

Image Aspect Ratio Concepts - 2 & Image inside circle

A Pen by Hemanth Vennelakanti on CodePen.

License.

index.html

<div class="square">
  <img class="square-image" src="https://i.etsystatic.com/11164635/r/il/221003/1457696907/il_570xN.1457696907_if6j.jpg" alt="nature-image">
</div>

<div class="circle">
  <img class="circle-image" src="https://i.etsystatic.com/11164635/r/il/221003/1457696907/il_570xN.1457696907_if6j.jpg" alt="nature-image">
</div>

style.css

div {
   margin-bottom: 2rem;
}

.square {
  width: 30%;
  border: 2px solid red;
}

.square-image {
  width: 100%;
}

.circle {
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 50%);
}

.circle-image {
  height: 100%;
  transform: scale(1.5) translateX(-3rem);
  /* width: 100%;
  object-fit: cover; */
 
}

.circle-image:hover {
  transform: scale(1) translateX(-3rem);
  filter: blur(1px) brightness(80%);
}