JSFiddle - React, Tailwind, and code Playground

by SebAshton

HTML

<div class="image-container">
    <span class="plus">+</span>
    <img src="http://placekitten.com/250/" width="250" height="250">
</div>

CSS

.image-container {
    position: relative;
    border: 5px solid grey;
    width: 250px;
    cursor: pointer;
}

.image-container img {
    display: block;
}

.image-container .plus {
    display: block;
    left: -50px;
    top: -50px;
    position: absolute;
    font-weight: bold;
    font-size: 26px;
    height: 26px;
    width: 26px;
    line-height: 26px;
    color: blue;
    text-align: center;
}

.image-container:hover .plus {
    top: 0;
    left: 0;
}