JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<ul class="thumb-list">
<li>
<a href=""><img src="https://lh4.googleusercontent.com/-ae0Q_J_FRHo/AAAAAAAAAAI/AAAAAAAAAH0/JAgZxJY6Bb4/photo.jpg" alt="BlaBla"></a>
</li>
<li>
<a href=""><img src="https://lh3.googleusercontent.com/-xG41LLlqjq8/AAAAAAAAAAI/AAAAAAAAASY/bv7wy3udbVg/photo.jpg" alt="BlaBla"></a>
</li>
<li>
<a href=""><img src="https://pbs.twimg.com/profile_images/378800000409299941/87ccae607fe35081777f49c05b0fbbd2.png" alt="BlaBla"></a>
</li>
</ul>
</div>
CSS
.container {
position: relative;
padding-top:64px;
padding-bottom: 64px;
margin: 0 auto;
width: 728px;
border: 1px solid black;
}
.thumb-list {
margin: 0 auto;
position: relative;
list-style: none;
}
.thumb-list li {
position: relative;
display: inline;
margin: 15px;
}
.thumb-list li a img{
height: 128px;
width: 128px;
border: 20px solid rgba(0, 0, 0, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.thumb-list li a img:hover {
-webkit-animation: toSquare 1s alternate; /* Safari 4+ */
-moz-animation: toSquare 1s alternate; /* Fx 5+ */
-o-animation: toSquare 1s alternate; /* Opera 12+ */
animation: toSquare 1s alternate; /* IE 10+ */
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes toSquare {
0% {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
100% {
-moz-border-radius: 30%;
-webkit-border-radius: 30%;
border-radius: 30%;
}
}