DEV Community

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

Add Twitch-like hover effect to a picture

chadriae profile image Christophe ・2 min read

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

Discussion (2)

pic
Editor guide
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 Author

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