First you'll need a container for your images, so let's start there.
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
<div class="image-overlay">
<a href="#">Overlay Link 2</a>
<a href="#">Overlay Link 1</a>
<!-- Add more links as needed -->
</div>
</div>
The links are in reverse order, so your first link will always be second.
This should produce the desired result, more or less.
/* Styling for container */
.image-container {
position: relative;
display: inline-block;
}
/* Styling for image */
.image-container img {
opacity: 0.6;
transition: opacity 0.3s ease-in-out;
}
/* Styling for text */
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: flex-end;
opacity: 0;
transition: opacity 0.3s ease-in-out;
background-color: rgba(0, 0, 0, 0.6); /* Overlay Color */
padding: 10px;
box-sizing: border-box;
}
/* Styling for the overlay text links */
.image-overlay a {
color: white;
text-decoration: none;
margin-right: 10px;
}
/* Hover effect */
.image-container:hover img {
opacity: 1;
}
.image-container:hover .image-overlay {
opacity: 1;
}