Edit in JSFiddle

<div class="clearfix container left">
    <div class="circle trans left"></div>
    <div class="circle trans left"></div>
    <div class="circle trans left"></div>
    <div class="circle trans left"></div>
</div>
<div class="clearfix container left">
    <div class="clover trans left"></div>
    <div class="clover trans left"></div>
    <div class="clover trans left"></div>
    <div class="clover trans left"></div>
</div>

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.cleaffix:after {
    clear: both;
}

.left {
    float: left;
}

.trans {
    -webkit-transition: background 1s, border-radius 1s;
    transition: background 1s, border-radius 1s;
}

.container div {
    min-width: 256px;
    min-height: 256px;
    background: #adf;
    border-radius: 128px;
}

.container {
    max-width: 512px;
}

.clover:nth-child(1) {
    border-bottom-right-radius: 0px;
}
.clover:nth-child(2) {
    border-bottom-left-radius: 0px;
}
.clover:nth-child(3) {
    border-top-right-radius: 0px;
}
.clover:nth-child(4) {
    border-top-left-radius: 0px;
}

.circle:hover,
.clover:hover {
    background: #fda;
}

.circle:hover {
    border-radius: 0px;
}

.clover:hover:nth-child(1) {
    border-bottom-right-radius: 128px;
    border-top-left-radius: 0px;
}
.clover:hover:nth-child(2) {
    border-bottom-left-radius: 128px;
    border-top-right-radius: 0px;
}
.clover:hover:nth-child(3) {
    border-top-right-radius: 128px;
    border-bottom-left-radius: 0px;
}
.clover:hover:nth-child(4) {
    border-top-left-radius: 128px;
    border-bottom-right-radius: 0px;
}