DEV Community

Cloneable 🇹🇬
Cloneable 🇹🇬

Posted on

Video Box Hover

Video Sources

Today we’re gonna be showing How to Code a Video Box with any hover on it.

So here is the example:

<div class=“vvh-kit”><img src=“https://img.youtube.com/vi/QcBkDYlVbF0/maxresdefault.jpg” width=“224”><span class=“title”> <div style=“font-family: Gotham Bold’; margin-top: 3px;”>(REMAKE) QToons! Intro in Radioup V23.15</div></span> <font size=“1.6” color=“gray”> 117 views • 4 months ago</font> <br><font size=“1.6” color=“gray”><i class=“material-icons calendar>calendar_today</i> May 01, 2021</font> </div> 
Enter fullscreen mode Exit fullscreen mode

Setup VVH-Kit

.vvh-kit { background: white; display: inline-block; text-align: left; box-shadow: 4.2px 4.2px 7px darkslategray; padding: 9px; border-radius: 6px; max-inline-size: 225px; filter: brightness(100%); transition: filter 0.07s ease-in; } .vvh-kit:hover { filter: brightness(80%); } 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)