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

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

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More