JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<a class="one" href="#1"><img src="http://i49.tinypic.com/33zaaoo.png" alt="" /></a>
<a class="two" href="#2"><img src="http://i49.tinypic.com/33zaaoo.png" alt="" /></a>
<a class="three" href="#3">
    
    <img src="http://i49.tinypic.com/33zaaoo.png" alt="" /></a>
<button>Click here to show/hide border around the link</button>

CSS

button { margin-left: 180px; }
.border { border: 1px solid green; }


img { float: left; }

a { 
    position: absolute;
    top: 120px;
    float: left;
}

a:hover { opacity: 0.6; }

.one { 
    z-index: 1; left: -250px;  
    -moz-transform:rotate(55deg);
    -webkit-transform:rotate(55deg);
}
.two { 
    z-index: 2; left: -212px;  
    -moz-transform:rotate(61deg);
    -webkit-transform:rotate(61deg);
}
.three { 
    z-index: 3; left: -174px;  
    -moz-transform:rotate(67deg);
    -webkit-transform:rotate(67deg);
}

JavaScript

$('button').on("click", function() {
    $('a').toggleClass('border');
});