JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imageWrapper">
        <img src="http://lorempixel.com/300/300/" alt="" />
        <a href="http://google.com" class="cornerLink">Link</a>
    </div>

CSS

.imageWrapper {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .imageWrapper img {
        display: block;
    }
    .imageWrapper .cornerLink {
        opacity: 0;
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 2px 10px;
        color: #ffffff;
        background: #000000;
        text-decoration: none;
        text-align: center;
        -webkit-transition: opacity 500ms;
        -moz-transition: opacity 500ms;
        -o-transition: opacity 500ms;
        transition: opacity 500ms;
        
    }
    .imageWrapper:hover .cornerLink {
        opacity: 0.8;
    }