JSFiddle - React, Tailwind, and code Playground

by TiGR

HTML

<a class="wrap">
    <img src="http://jsfiddle.net/img/logo.png" />
</a>

CSS

* {
    box-sizing: border-box;
}

.wrap {
    display: block;
    position: relative;

    height: 100px;
    width: 200px;

    background-color: blue;
}

.wrap img {
    display: block;
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.wrap:after {
    display: block;
    position: absolute;

    content: " ";
    z-index:10;

    width: 40px;
    height: 40px;
    margin-top: 30px;
    margin-left: 80px;

    background: red url('http://iconizer.net/files/Farm-fresh/orig/magnifier_zoom_in.png') no-repeat center;

    opacity: 0;
    transition: opacity ease 0.5s;
}

.wrap:hover:after {
    opacity: 1;
}

.ie8 .wrap:after {
    visibility: hidden;
}

.ie8 .wrap:hover:after {
    visibility: visible;
}