<style>
.container {<br />
position: relative;<br />
width: 50%;<br />
}</p>
<p>.image {<br />
display: block;<br />
width: 100%;<br />
height: auto;<br />
}</p>
<p>.overlay {<br />
position: absolute;<br />
bottom: 0;<br />
left: 0;<br />
right: 0;<br />
background-color: #008CBA;<br />
overflow: hidden;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transform: scale(0);<br />
-ms-transform: scale(0);<br />
transform: scale(0);<br />
-webkit-transition: .3s ease;<br />
transition: .3s ease;<br />
}</p>
<p>.container:hover .overlay {<br />
-webkit-transform: scale(1);<br />
-ms-transform: scale(1);<br />
transform: scale(1);<br />
}</p>
<p>.text {<br />
color: white;<br />
font-size: 20px;<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
-webkit-transform: translate(-50%, -50%);<br />
-ms-transform: translate(-50%, -50%);<br />
transform: translate(-50%, -50%);<br />
text-align: center;<br />
}<br />
</style>
<h2>Image Hover Fullscreen Zoom</h2>
Hover over the image to see the zoom effect.
<div class=”container”><img class=”image” src=”https://www.dhthomas.co.uk/wp-content/uploads/2024/02/human-eye-1925630-scaled.jpg” alt=”Avatar” />
<div class=”overlay”>
<div class=”text”>Hello World</div>
</div>
</div>