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

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;    
}

CodePudding user response：

Yes, it can be done with border-radius.

.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

#img {
  height: 100%;
}

.wrapper:hover {
  border-radius: 10%;
}

<div >
  <img id="img"  src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" alt="zyra">
</div>

CodePudding user response：

Simply use border-radius:0px; in hover.

CodePudding user response：

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%;
}

<div >
</div>