Web Design and Web Development Tutorials

Post Page Advertisement [Top]

 


Hello friends, I hope you are well. In this blog post, you will learn how to make an amazing css image hover effect by using only HTML & CSS. 


CSS Image Hover Effect | HTML & CSS Video Tutorial:


To create this CSS Image hover Effect using HTML, CSS. Follow these steps:

  • Create a new folder and name it whatever you want, then create two files inside this folder as follow.
    • Create an index.html file.
    • Create a style.css file. 

  • Now past this code into your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="images-container">
        <div class="image-card"><img src="1.jpg" alt=""></div>
        <div class="image-card"><img src="2.jpg" alt=""></div>
        <div class="image-card"><img src="3.jpg" alt=""></div>
        <div class="image-card"><img src="4.jpg" alt=""></div>
    </div>
</body>
</html>

  • then past this code into your style.css file.
*{
    margin: 0;
    padding: 0;
}

body{
    min-height: 100vh;
    background-color: #596275;
    display: flex;
    align-items: center;
    justify-content: center;
}

.images-container{
    display: flex;
}

.image-card{
    width: 240px;
    height: 360px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: -6px 6px 20px #00000070;
    transition: .3s linear;
}

.image-card img{
    width: 100%;
}

.image-card:not(:first-child){
    margin-left: -50px;
}

.image-card:hover{
    transform: translateY(-24px);
}

.image-card:hover ~ .image-card{
    transform: translateX(60px);
}



Download Source Code From Here


No comments:

Post a Comment

Bottom Ad [Post Page]