Clip path

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Clip path</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="contenedor">
    	<div class="caja1"></div>
    	<div class="caja2"></div>
    </div>
</body>
</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:linear-gradient(130deg,
#e58181,#1b1831);
}
.contenedor{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
box-shadow: 1px 10px 25px rgba(0,0,0,0.55);
}
.contenedor div{
position: absolute;
width: 100%;
height: 100%;
}
.caja1{
background: url(https://previews.123rf.com/images/believeinme33/believeinme331606/believeinme33160600169/58939391-burgas-ravadinovo-bulgaria-4-de-mayo-charca-y-puentes-pasados-hermosos-rodeados-de-los-%C3%A1rboles-el-4-de.jpg);
background-size: 100% 100%;
}
.caja2{
background: url(https://ppssdeangel.files.wordpress.com/2019/03/puentes-colgantes-hermosos.jpg?w=1400);
background-size: 100% 100%;
transition: 0.6s;
clip-path: polygon(0 0, 100% 0, 100% 0, 0% 100%);
}
.caja2:hover{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.caja1:hover ~ .caja2{
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
@media only screen and (min-width:320px) and (max-width:768px){
.contenedor{
width: 95%;
height: 250px;
}
}