Hover to clear image.

on

gallery

Hover to clear image.

<!DOCTYPE html>
<html>
<head>
<title>Just For Fun | Brick Fall</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
.container
{
width: 100%;
height: 100vh;
background-size: cover;
overflow: hidden;
background: #000;
}
.container div
{
position: relative;
display: block;
float: left;
width: 20%;
height: 20vh;
box-sizing: border-box;
}
.container div:hover
{
z-index: 10000;
}
.container div:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(bg2.jpg);
background-attachment: fixed;
transform-style: preserve-3d;
/*transform: perspective(500px) rotateX(0deg);*/
transform-origin: top;
transform: perspective(1000px) rotateX(0deg) translateY(0);
transition: 0.5s linear;
}
.container div.flip:before
{
transform: perspective(1000px) rotateX(90deg) translateY(-50%);
}
.container div:after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(bg1.jpg);
background-attachment: fixed;
transform-style: preserve-3d;
/*transform: perspective(500px) rotateX(-90deg);*/
transform-origin: bottom;
transform: perspective(1000px) rotateX(-90deg) translateY(50%);
transition: 0.5s linear;
}
.container div.flip:after
{
transform: perspective(1000px) rotateX(0deg) translateY(0);
/*transition-delay: 0.5s;*/
}

</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.container div').mouseover(function(){
$(this).addClass('flip')
})
})
</script>
</body>
</html>