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 -:
More links -:
- [Instagram Hack]|HiddenEye Hacking Instagram With Kali Linux 2020
- How to install Linux OS on your android device?
- How to Spy on Someone using (MITM) Man in the Middle attack?
- How to Hack Someone’s Wi-Fi Password with aircrack-ng tool
- Advance Jamming: Jam Wireless Network using MDK3 tool with Kali Linux
- How to Jam Wireless Network(Wi-Fi) with Kali Linux | 2020
- Top 10 Commands for Kali Linux Users || 2020
- How to Split single Kali Linux terminal into multiple
- How to hack Bluetooth devices?
- How to download Instagram stories, reels, posts
- How to Record WhatsApp Video Call in an Android mobile phone?.
- How to create a youtube video thumbnail in ms paint?
- How to schedule a WhatsApp message?
- How to chat offline with your friends on WhatsApp?
- Top 5 Entertainment Apps for Android Users: Short break from Study
- What is the Multiplexing technique: Computer Networking Concept
- How to create a YouTube channel playlist from mobile phones or PC?
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.
