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)