I want my image to be shown in a circle and when hovered on it gets full

October 5, 2022

I have tried achieving this effect using border-radius (code below) but I want the circle to be smaller, as shown in this example https://imgur.com/a/gKHtVXr and I don’t think I can acheive this with border-radius.

<img class = "zyra-thumb" src = "thumbnail champion/thumb2.png" alt="zyra">
CSS:
.zyra-thumb{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 150px;
    transition: border-radius 0.3s;
}
.zyra-thumb:hover{
    border-radius: 10px;    
}

>Solution :

Based on your attached image I assume this is the effect you are trying to achieve.

.zyra-thumb {
  background: url(https://i.stack.imgur.com/OR7ho.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  display: inline-block;
  border-radius: 20px;
}

.zyra-thumb::before {
  content: "";
  display: block;
  width: 50%;
  padding-bottom: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  border: solid 400px #41373f;
  border-radius: 50%;
  transition: all ease-in-out 0.3s;
}

.zyra-thumb:hover::before {
  width: 150%;
  padding-bottom: 150%;
}