I based this code on the CodePen link by Arnaud Delante, but I thought it might be handy to make an article of this.
It's pretty straight forward and you can change stuff to your liking.
1. HTML
Import a stylesheet, show some pictures and write out the HTML code.
For every picture that needs the hover effect, we have to wrap it in a separate container div, like this:
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<img class="picture" src="picture.jpeg" alt="picture">
</div>
<div class="container">
<img class="picture" src="picture2.jpeg" alt="picture">
</div>
</body>
</html>
2. CSS
Use your class names and use this CSS code:
body {
text-align: center;
}
.container {
display: inline-block;
margin: 50px;
background-color: red;
}
.container:before,
.container:after {
display: block;
background-color: red;
width: 8px;
height: 8px;
position: absolute;
transition: all .15s ease;
}
.container:before {
top: 0;
left: 0;
transform-origin: top left;
transform: rotate(-45deg) scale(0);
}
.container:after {
right: 0;
bottom: 0;
transform-origin: bottom right;
transform: rotate(45deg) scale(0);
}
.picture {
height: 300px;
display: block;
transform: translate(0, 0);
transition: all .15s ease;
z-index: 10;
}
.container:hover .picture {
transform: translate(6px, -6px);
}
.container:hover:before {
transform: rotate(-45deg) scale(1);
}
.container:hover:after {
transform: rotate(45deg) scale(1);
}
I just used a simple red background color. Of course, you can add any color you like. Or tweak any other of these variables.
Top comments (2)
Sounds a bit overkill, you can do it with box-shadow and only 3 lines of CSS: jsfiddle.net/7oy810nw/1/
Thanks for this. So this article has 2 solutions then.