Posted on Apr 20, 2021

Add Twitch-like hover effect to a picture

#css #styling #hover #html

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); }