I've got a webpage gallery of thumbnail pics that enlarge when the cursor is over them, but I'd prefer them to zoom in or out when clicked, and would appreciate it someone would show me how I could make that happen.
Below is the code I'm currently using, but with four example pics.....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>
To Zoom an Image on
Mouse Hover using CSS
</title>
<style>
body {
text-align: center;
}
.image-container img {
transition: transform 0.3s ease-in-out;
}
.image-container img:hover {
transform: scale(1.9);
}
</style>
</head>
<body>
<div class="image-container">
<hr>
<b>"Click a pic to zoom in and out" required.<b><br>
<img src="https://yoursmiles.org/ismile/flag3/flag03031.jpg" alt="X" border="1" title="AUSTRALIA" />
<img src="https://yoursmiles.org/ismile/flag3/flag03052.jpg" alt="X" border="1" title="CANADA" /><br>
<img src="https://yoursmiles.org/ismile/flag3/flag03051.jpg" alt="X" border="1" title="USA" />
<img src="https://yoursmiles.org/ismile/flag3/flag03070.jpg" alt="X" border="1" title="UK" />
<hr>
</body>
</html>
Below is the code I'm currently using, but with four example pics.....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>
To Zoom an Image on
Mouse Hover using CSS
</title>
<style>
body {
text-align: center;
}
.image-container img {
transition: transform 0.3s ease-in-out;
}
.image-container img:hover {
transform: scale(1.9);
}
</style>
</head>
<body>
<div class="image-container">
<hr>
<b>"Click a pic to zoom in and out" required.<b><br>
<img src="https://yoursmiles.org/ismile/flag3/flag03031.jpg" alt="X" border="1" title="AUSTRALIA" />
<img src="https://yoursmiles.org/ismile/flag3/flag03052.jpg" alt="X" border="1" title="CANADA" /><br>
<img src="https://yoursmiles.org/ismile/flag3/flag03051.jpg" alt="X" border="1" title="USA" />
<img src="https://yoursmiles.org/ismile/flag3/flag03070.jpg" alt="X" border="1" title="UK" />
<hr>
</body>
</html>
