Skip to content

Instantly share code, notes, and snippets.

@mingsai

mingsai/css image zoom

Last active February 18, 2022 22:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mingsai/ca71b8607c31faf06c4003f0c9857f4a to your computer and use it in GitHub Desktop.
Save mingsai/ca71b8607c31faf06c4003f0c9857f4a to your computer and use it in GitHub Desktop.
Download ZIP
CSS a small amount of html and multiple image sizes allow for zoom on hover
Raw
css image zoom
// source/exampple @ https://jsfiddle.net/mingsai/jqt0732k/2/
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<style>
#thumbwrap {
position:relative;
margin:75px auto;
width:252px; height:252px;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
}
.thumb span {
position:absolute;
visibility:hidden;
}
.thumb:hover, .thumb:hover span {
visibility:visible;
top:0; left:250px;
z-index:1;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div id="thumbwrap">
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/150" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/225" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/175" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/275" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/375" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/475" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/575" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/675" alt=""></span></a>
<a class="thumb" href="#"><img src="https://via.placeholder.com/75" alt=""><span><img src="https://via.placeholder.com/775" alt=""></span></a>
</div>
<div class="w3-container w3-teal">
<h1>My Car</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My footer information</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment