JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<div class="menu-social">
    <a href="#" class="fx link-social link-social-facebook" title="Facebook"> </a>
</div>

<div class="shape-slideshow right margint-15">
					<div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-timeout="10000" data-cycle-pager=".slide-pager">
						<img src="http://www.imagenstop.net/wp-content/gallery/fotos-de-paisagem/Paisagem-americana.jpg" />
					</div>
				</div>

CSS

.menu-social { padding:20px 0; }
.link-social { width:31px; height:31px; display:inline-block; }
.link-social:before {
	display:block; content:""; width:31; height:31px; border:1px #DF9201 solid;
	-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}
.link-social:hover:before {
	border:4px #DF9201 dashed;
	transform:rotate(36000deg); -webkit-transform:rotate(36000deg); -moz-transform:rotate(36000deg);
	transition: all 500s ease; -webkit-transition: all 500s ease; -moz-transition: all 500s ease; -o-transition: all 500s ease;
}
.link-social-facebook { background:url('../img/sprite_sociais_1.png') no-repeat 12px 8px #F5F1EC; }

.shape-slideshow { width:617px; height:617px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; overflow:hidden; }