Card Layout With Playable Thumbnails On Hover | With On Click Popup Modals - Html, CSS & Javascript

Responsive Cards With Playable Thumbnails On Hover | And With On Click Popup Modals - Html CSS & Javascript
In this video, you will learn how to design these cards with a playable thumbnail on mouseover the thumbnail image and stop it on mouseleave. Each card's long titles are shortened with "..." using JQuery. And for each card, there is a popup modal screen to display each video in the modal screen.
✔️ Clear Coding
✔️ Easy to Follow
📚 Chapters
----------------------------
0:00 - Project Demo
3:54 - Files setup
4:22 - Link Unicons
4:45 - Link JQuery libraries
5:17 - Card design (Html, Css)
17:40 - Playable thumbnail on mouseover/mouseleave (Javascript)
24:52 - Short each long title with "..." (JQuery)
28:37 - Show full title on mouse hover on the title (Html)
30:13 - Video popup modal (Html, Css)
37:58 - Media queries (Css)
38:57 - Video popup modals (Html)
41:09 - Popup modals on click each card (Javascript)
46:37 - Modals close button (Javascript)
+ Like and Subscribe 🔔 for More! ❤
∎ Get This Project Source Codes - www.buymeacoffee.com/codingsn...
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - www.buymeacoffee.com/codingsn...
▶️ Video Clip Links
--------------------------------------
∎ Video 01 - www.pexels.com/video/a-long-a...
∎ Video 02 - www.pexels.com/video/red-leav...
∎ Video 03 - www.pexels.com/video/girl-wal...
∎ Video 04 - www.pexels.com/video/dash-cam...
∎ Video 05 - www.pexels.com/video/a-view-o...
∎ Video 06 - www.pexels.com/video/blue-sky...
∎ Download File Setup - codingsnow.com
∎ Download All Source Files On Patreon - / 73662666
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
∎ Video Source - www.pexels.com
∎ Unicons - iconscout.com/unicons/getting...
∎ JQuery Libraries - cdnjs.com/libraries/jquery
#CodingSnow #WebDesign #ThumbnailHover #CardDesign
____________________________
Copyright Disclaimer under section 107 of the Copyright Act of 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.

[@samuelk1623]

Wooow...amazing work man! 😍😍😍 Keep doing this type of projects.

[@CodingSnow]

Thank you ❤, always trying to do the best.

[@hunnyff_official]

wow amazing

[@christs3117]

Excelente

[@Alexisromero05]

Eres un crack

[@hashiathapaththu9608]

Woow amazing ... brother 💕 beautiful 💕

[@CodingSnow]

Thank you ❤

[@k.c.athapaththu9314]

💯🔥superb👍❤️

[@CodingSnow]

Thank you ❤

[@sabaamran898]

your channel is amazing! i've made almost a complete website through this channel!. And brother can you please kindly make a video on services page with html and css!!

[@CodingSnow]

Thank you! ❤, I'll make a video on that.

[@redeyenumber8499]

hi brather , After pressing the close button of the video play window, the video continues to play, which causes the video with sound to continue playing.

[@mamta1378]

Aaj tk mujhe coding smjh nii aaya +2 gya mera 😂😕

[@hunnyff_official]