HTML code
<!DOCTYPE html>
<html>
<head>
<title>PicGallery</title>
<link rel="stylesheet" type="text/css" href="css/picgallery.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<h1>Image Gallery</h1>
<div class="gallery">
<a href="gallery/1.jpg" data-lightbox="MyGallery" data-title="Red flower"><img src="gallery/1.jpg"></a>
<a href="gallery/2.jpg" data-lightbox="MyGallery" data-title="Car"><img src="gallery/2.jpg"></a>
<a href="gallery/3.jpg" data-lightbox="MyGallery"><img src="gallery/3.jpg"></a>
<a href="gallery/4.jpg" data-lightbox="MyGallery"><img src="gallery/4.jpg"></a>
<a href="gallery/5.jpg" data-lightbox="MyGallery"><img src="gallery/5.jpg"></a>
<a href="gallery/6.jpg" data-lightbox="MyGallery"><img src="gallery/6.jpg"></a>
<a href="gallery/7.jpg" data-lightbox="MyGallery"><img src="gallery/7.jpg"></a>
<a href="gallery/8.jpg" data-lightbox="MyGallery"><img src="gallery/8.jpg"></a>
</div>
</body>
</html>
CSS code
color: aqua;
text-align: center;
}
.gallery img{
width: 150px;
height: 150px;
padding: 20px;
transition: 1s;
}
.gallery img:hover{
transform: scale(1.5);
}
click here to download a complete file.
0 comments:
Post a Comment