Add Twitch-like hover effect to a picture

#css #styling #hover #html

I based this code on the CodePen link byArnaud 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><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"type="text/css"href="style.css"><title>Document</title></head><body><divclass="container"><imgclass="picture"src="picture.jpeg"alt="picture"></div><divclass="container"><imgclass="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.15sease;}.container:before{top:0;left:0;transform-origin:topleft;transform:rotate(-45deg)scale(0);}.container:after{right:0;bottom:0;transform-origin:bottomright;transform:rotate(45deg)scale(0);}.picture{height:300px;display:block;transform:translate(0,0);transition:all.15sease;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);}