JSFiddle - React, Tailwind, and code Playground

by Neviton

HTML

<div id="mainx">
    <img src="http://farm3.staticflickr.com/2845/9509482394_9ca93ff191.jpg" alt=""/>
    <a href="javascript:void(0);" id="l" class="modal-prev">&lsaquo;</a>
    <a href="javascript:void(0);" id="r" class="modal-next">&rsaquo;</a>
</div>

CSS

#l, #r {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #222222;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 1;
    visibility: hidden;
}
#r {
  content: '\203A';
  left: auto;
  right: 15px;
}
#mainx {
    position: absolute;
    width: 500px;
    height: 375px;
    background-color: silver;
}

#mainx:hover #l, #mainx:hover #r {
    visibility: visible;
}

div#main:hover:after {
    /*content:'\2039';*/
    content:url(http://icons-search.com/img/fasticon/icomic_lnx.zip/icomic_lnx-icons-32X32-web.png-32x32.png);
    position: absolute;
    top: 50%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #222222;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 1;
}
img {
    position: absolute;
    top: 0;
}