After investing some time, I managed to come up with a CSS-only solution that achieves the desired outcome without the need for JavaScript. This solution is fully responsive as it utilizes percentages for sizing. Here is what the HTML looks like:
<div class="viewport_css">
// To ensure square dimensions, a dummy image is used
<img class="dummy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<a class="imgwrapper" href="#">
<img src="http://www.lorempixel.com/730/730/" alt="More Info" />
</a>
</div>
Below is the CSS code:
.viewport_css {
position: relative;
max-width: 360px;
height: auto;
overflow: hidden;
}
// Ensuring the viewport_css remains square-shaped
.viewport_css .dummy {
width: 100%;
height: auto;
display: block;
}
.viewport_css a,
.viewport_css a:hover:before,
.viewport_css a:hover:after {
position: absolute;
left: 0;
right: 0;
}
.viewport_css a,
.viewport_css a:hover:after {
top: 0;
bottom: 0;
}
.viewport_css a:hover:after {
content: '';
display: block;
z-index: 100;
background-color: rgba(255, 0, 0, .5);
}
.viewport_css a:hover:before {
content: 'View';
color: #fff;
top: 50%;
text-align: center;
z-index: 200;
margin-top: -0.5em;
}
.viewport_css .imgwrapper {
width: 200%;
height: 200%;
margin-left: -50%;
margin-top: -50%;
transition: all 1s ease-in;
}
.viewport_css .imgwrapper img {
width: 100%;
height: auto;
display: block;
}
.viewport_css .imgwrapper:hover {
width: 100%;
height: 100%;
margin-left: 0;
margin-top: 0;
}