JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <img src="http://www.nireland.com/bridgeman/Butterfly%20Bridge.jpg">
    
    <div class="tooltip">
    <div class="bg"></div>
        <p> Viuw  slideshow </p>
        <a href="">Down;oad this gallery</a>  
        <br />
        <a href="">Download fulll size</a>  
    </div>
    
</div>

CSS

.content {
    position: relative;
    width:400px;
    height: 300px;
}

.content img {
    width: 400px;
    height: 300px;
}

.tooltip{
    position: absolute;
    width: 90%;
    height: 100px;
    right: 5px; 
    bottom: 10px;  
    z-index: 5;
    border-radius: 5px;
    display: none;
}
.bg {
    background: #000;
    opacity: 0.6;
    left: 0;
    top: 0;
    position: absolute; 
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: -1;
}
p {
    color: #fff;
}

a {
    color : orange;
}

.content:hover .tooltip {
    display: block;
}