Educational

Image Gallery with Hover Effect

Written by

Saim Khalid

in

<!DOCTYPE html>
<html>
<head>
  <style>

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px;
}
.gallery img {
  width: 100%;
  border-radius: 10px;
  transition: transform 0.3s;
}
.gallery img:hover {
  transform: scale(1.1);
}
  </style>
</head>
<body>
  <div class="gallery">

&lt;img src="https://via.placeholder.com/200" alt="1"&gt;
&lt;img src="https://via.placeholder.com/200" alt="2"&gt;
&lt;img src="https://via.placeholder.com/200" alt="3"&gt;
&lt;img src="https://via.placeholder.com/200" alt="4"&gt;
&lt;img src="https://via.placeholder.com/200" alt="5"&gt;
&lt;img src="https://via.placeholder.com/200" alt="6"&gt;
  </div>
</body>
</html>

Explanation:

  • display: grid creates a gallery.
  • hover + scale gives zoom effect.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts