JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">	
<div class="circle">




<img src="http://lorempixel.com/200/200/sports/1" alt="picture">
</div>
</div>

<div class="container2">	
<div class="box">




<img src="http://lorempixel.com/200/200/sports/1" alt="picture"">
</div>
</div>

CSS

.container{
  overflow:hidden;
  width:200px;
  height:200px;
  border-radius:50%;
  border:10px solid black;
}
.circle{
	width:200px;
	height:200px;

	border-radius:50%;
	overflow:hidden;
  background:#900;
}

.circle img{
transition: all 1s ease;
  }

.circle:hover img{
    transform:scale(1.50);	
		 	 
}



.container2{
  overflow:hidden;
  width:200px;
  height:200px;
  border:10px solid black;
}
.box{
	width:200px;
	height:200px;
	overflow:hidden;
  background:#900;
}

.box img{
transition: all 1s ease;
  }

.box:hover img{
    transform:scale(1.50);	
		 	 
}