Hello my all dear visitors, once again, your most welcome into the bittutech.com domain.
Today, we are going to learn about some basic html tags and css properties and design the responsive web page. In which, we will show that how to design picture album hover effect using html and css.
We are going to show that what is the code of that webpage and how that webpage looks –
<html>
<head>
<title>
</title>
<style>
body{
margin:0;
padding: 0;
max-height: 100%;
overflow:hidden;
}
.image_container
{
background: linear-gradient(195deg,black,white,blue);
height: fit-content;
width: 100%;
}
.image_container_2
{
background: linear-gradient(195deg,red,white,orange);
height: fit-content;
width: 100%;
}
.image_contain{
height:30%;
width:10%;
display: inline-block;
box-shadow: 0px 0px 10px 10px blue;
margin:25px;
transition: 0.8s all;
}
img
{
height: 100%;
width: 100%;
}
img:hover
{
transform: scale(1.01);
}
.image_contain:hover
{
transform: scale(1.5);
margin: 100px;
padding: 0;
transition: 1.1s all;
box-shadow: 0px 0px 10px 10px black;
}
</style>
</head>
<body>
<div class="image_container">
<div class="image_contain">
<img src="car1.jpg">
</div>
<div class="image_contain">
<img src="car2.jpg">
</div>
<div class="image_contain">
<img src="car3.jpeg">
</div>
<div class="image_contain">
<img src="car4.jpg">
</div>
<div class="image_contain">
<img src="car5.jpg">
</div>
<div class="image_contain">
<img src="car6.jpg">
</div>
</div>
<div class="image_container_2">
<div class="image_contain">
<img src="bike1.jpg">
</div>
<div class="image_contain">
<img src="bike2.jpg">
</div>
<div class="image_contain">
<img src="bike3.jpg">
</div>
<div class="image_contain">
<img src="bike4.jpg">
</div>
<div class="image_contain">
<img src="bike5.jpg">
</div>
<div class="image_contain">
<img src="bike6.png">
</div>
</div>
</body>
</html>
Your webpage looks like on your web browser -:
Last words-: Thank you so much to come into this side and grab the basic knowledge of html and css. you can enjoy other more article and give us your precious feedback to enhance our motivation.
