DEV Community

Cover image for Add Twitch-like hover effect to a picture
Christophe
Christophe

Posted on

Add Twitch-like hover effect to a picture

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

I just used a simple red background color. Of course, you can add any color you like. Or tweak any other of these variables.

Live demo

hover

Top comments (2)

Collapse
 
afif profile image
Temani Afif

Sounds a bit overkill, you can do it with box-shadow and only 3 lines of CSS: jsfiddle.net/7oy810nw/1/

Collapse
 
chadriae profile image
Christophe

Thanks for this. So this article has 2 solutions then.