CSS Image effect

HTML CODE:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="2.page.css">
</head>
<body>
   
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>
</html>

CSS CODE:

body{
    margin: 0;
    padding: 0;
  background:#262626
}
ul{
    margin: 0;
    padding: 0;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 760px;
    height: 430px;
    display: flex;
}
ul li{
    list-style: none;
    width: 25%;
background:url(https://images.pexels.com/photos/206718/pexels-photo-206718.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-size: cover;
    height: 100%;
    transition: .5s;
}
ul:hover li:nth-child(odd){
    transform: skewY(15deg);
    box-shadow: inset 20px 0px 50px rgba(0,0,0,.5);
}
ul:hover li:nth-child(even){
    transform: skewY(-15deg);
    box-shadow: inset 20px 0px 50px rgba(0,0,0,.5);
}
ul li:nth-child(1){
    background-position: 0;
}
ul li:nth-child(2){
    background-position: -190px;
}
ul li:nth-child(3){
    background-position: -380px;
}
ul li:nth-child(4){
    background-position: -570px;
}

Leave a comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Design a site like this with WordPress.com