JSFiddle - React, Tailwind, and code Playground

by bateast

HTML

<body>
<div class="box">
    <div class="spin-box">
        <img class="spin" src="http://www.ajaxline.com/files/spin2.png"/>
    </div>
    <div class="i1-box">
        <img class="i1" src="http://pic.pimg.tw/dinosaurs/1331569228-2493837747.jpg"/>
    </div>
    <div class="content">
        Content
    </div>
</div>
</body>

CSS

.box {
    position: absolute;
    display: block;
    border: 1px solid #ccc;
    transition: all .3s;    
}

.i1-box {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

.i1 {
    position: relative;
    width: 50px;
    height: 50px;
    left: 0px;
    top: 0px;    
}

.content {
    width: 0;
    height: 0;
    opacity: 0;
}

.spin {
    width: 50px;
}

.spin:hover {
    -webkit-animation: spin 1s infinite linear;
}


@-webkit-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}