Home Uncategorized Css Image Hover Effects: How To Create Image Hover Overlay Effects

Css Image Hover Effects: How To Create Image Hover Overlay Effects

319
0

Css Image Hover Effects: How To Create Image Hover Overlay Effects

HTML

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title> Css Image Hover Effect </title>
        <link rel="stylesheet" href="style.css">
</head>

<body>
        <div class="container">
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img1.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img2.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>

                <div class="box">
                        <div class="imgbox">
                                <img src="images/img3.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img4.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img5.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img6.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img7.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
                <div class="box">
                        <div class="imgbox">
                                <img src="images/img8.jpg" alt="image1">
                        </div>
                        <div class="info">
                                <h2>Project</h2>
                                <p>Hello World</p>
                                <a href="#">View</a>
                        </div>
                </div>
        </div>

</body>

</html>

CSS


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f1c40f;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px;
}

.container {
    width: 1280px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.container .box{
    background: #000;
    width: 300px;
    height: 300px;
    margin: 10px;
    position: relative;
}

.container .box .imgbox{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container .box .imgbox img{
    width: 100%;
    height: 100%;
    transition:  transform 2s;
}
.container .box:hover .imgbox img{
    transform: scale(1.4)
}

.container .box .info{
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0, .5);
    color: #ffffff;
    border: 1px solid #f1c40f;
    padding: 10px;
    text-align: center;
    transform: scaleX(0);
    transition: .6s;
}

.container .box:hover .info{
transform: scaleX(1)
}

.container .box .info a{
    text-decoration: none;
    color: #ffffff;
    border: 1px solid #f1c40f;
    padding: 5px 20px;
    margin-top: 15px;
    border-radius: 3px;
}

.container .box .info a:hover{
    background: #f1c40f;
}

(Visited 206 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here