JSFiddle - React, Tailwind, and code Playground

by Giampaolo Tenti

HTML

<div id="wrap">
    <div></div>
    <div></div>
    <img src="http://i.stack.imgur.com/bFfbC.png" alt="" />
</div>

CSS

#wrap {
    position:relative;
    width:280px;
    height:280px;
}

#wrap img{
    position:relative;
    max-width:100%;
    height:auto;
    top:0;
    left:0;
    z-index:1;
    transform: scale(1);
    transition: 0.4s;
}

#wrap img:hover {
     transform:scale(1.25);
}

#wrap div:nth-child(1){
    background: transparent;
    border: 15px solid red;
    border-radius: 100px;
    height: 99px;
    left: 75px;
    overflow: hidden;
    position: absolute;
    top: 77px;
    width: 99px;
    z-index: 2;
    transform: scale(1);
    transition: 0.4s;
}

#wrap div:hover:nth-child(1){
    transform: scale(1.5);
}

#wrap div:nth-child(2){
    background: transparent;
    border: 20px solid red;
    border-radius: 40px;
    height: 34px;
    left: 103px;
    overflow: hidden;
    position: absolute;
    top: 105px;
    width: 34px;
    z-index: 3;
    transform: scale(1);
    transition: 0.4s;
}

#wrap div:hover:nth-child(2){
    transform: scale(1.5);
}