JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div style="position: relative;">
    <div class="box"></div>
    <a href="#" style="display: none;"><i class="mid-icon fa fa-times fa-2x"></i></a>
</div>

CSS

body {
    background:#e7e7e7;
}
.box {
    width:300px;
    height:300px;
    margin:5% auto 0 auto;
    background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
    background-size:cover;
    overflow:hidden;
}
.mid-icon {
    color: #333;
    left: calc(50% - 11px);
    position: absolute;
    transform: translateY(calc(-50% - 1px));
    top: calc(50% - 1px);
}

JavaScript

$('.box').mouseenter(function () {
    $(this).css('opacity', '0.3');
    $(this).next().css('display', 'block');
}).mouseleave(function () {
    $(this).css('opacity', '1');
    $(this).next().css('display', 'none');
});

$('.mid-icon').mouseenter(function () {
    $(this).parent().prev().css('opacity', '0.3');
    $(this).parent().css('display', 'block');
});