Question 186571 in Html Question posted in
Some basic documentation can be found here.

Html – How can I crop an image with a border-radius when hover

How can I crop a image with a border-radius of 56px when hover?

Like this

(just mine I want to have a css defined border of 56px)

Tags:

2

Answers


  1. 0

    Use clip-path:

    img {
  clip-path: inset(0 round 50px);
  transition: .5s;
}
img:hover {
  /* crop by 10px */
  clip-path: inset(10px round 50px);
}
    <img src="https://picsum.photos/id/1074/300/300">
    Login or Signup to reply.
  2. 0

    unforetunately, i think you cannot do that. cause border-radius defined the rounds angle. you can crop your picture to be circle or ellipse or something like that. but to be corped in that way. probaly i dont think that’s possible.

    but you can do so using clip or clip-path or both if i remember.

    there is online sites would help you to crop your pic with that element, they will generate the value for you, in case you didn’t understand that property well (like me). or also if you want complex shapes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search