DEV Community

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

Posted on

3 3

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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

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.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay