JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="circle"></div>

<div class="otherCircle">
    <div class="kucukCircle">
    </div>
</div>

<div class="theOtherCircle">
    <div class="kucukCircle">
    </div>
</div>

CSS

.circle {
    -moz-border-radius: 100px/100px;
    -webkit-border-radius: 100px 100px;
    border-radius: 100px/100px;
    background:url('http://www.erenyener.com/img/gulsaheren.jpg');
    background-size:50px 50px;
    width:100px;
    height:100px;
    position:absolute;
    margin-left:150px;
    margin-top:100px;
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    opacity:0.9;
}
.circle:hover {
    opacity:1.0;
    background: url('http://www.erenyener.com/img/gulsaheren.jpg');
    background-size:200px 200px;
    width:200px;
    height:200px;
    -moz-border-radius: 0px/0px;
    -webkit-border-radius: 0px 0px;
    border-radius: 0px/0px;
    position:absolute;
    margin-left:100px;
    margin-top:50px;
    background-color:aqua;
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}

.otherCircle
{
    -moz-border-radius: 100px/100px;
    -webkit-border-radius: 100px 100px;
    border-radius: 100px/100px;
    background-color:red;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
     transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}

.otherCircle>.kucukCircle
{
    width:20px;
    height:20px;
    background-color:#FFF;
    margin-left:40px;
    margin-top:40px;
    position:absolute;
    -moz-border-radius: 40px/40px;
 ...