Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save apvale/48fc81d25fbba31dfd315946a947080d to your computer and use it in GitHub Desktop.

Select an option

Save apvale/48fc81d25fbba31dfd315946a947080d to your computer and use it in GitHub Desktop.
Image Aspect Ratio Concepts - 2 & Image inside circle
<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>
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%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment