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">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <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>

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

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

    display: flex;

    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%;

    margin-left: -50px;

    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]