How to design picture album hover effect using html and css?

You are currently viewing How to design picture album hover effect using html and css?
Photo Album

How to design picture album hover effect using html and css?

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 -:

bittutech-responsive-webpage-photo-album-using-html-and-css
Photo Album

More links -:

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.

Share post

Prajjwal Singh

Tech Blogger || Web developer || Computer Networking Enthusiast || Microsoft SQL Database Management Expert || Software Debugger || Learned DOS OS Structure

Leave a Reply