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 tutorial, 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.
+Like and Subscribe 🔔 for More! ❤️❄️
◾Get This Project Source Codes - / cards-with-playable-thumbnails-on-hover-52813
💙 Become a Member to Get All Source Codes - / codingsnow
✔️ 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)
Book Me 🔖
-----------------------
∎ Book me to Fix your project Bugs & Issues - https://www.buymeacoffee.com/codingsn...
∎ Book me to Convert your Figma, PSD, and XD Design to an HTML Website - https://www.buymeacoffee.com/codingsn...
▶️ Video Clip Links
--------------------------------------
∎ Video 01 - https://www.pexels.com/video/a-long-a...
∎ Video 02 - https://www.pexels.com/video/red-leav...
∎ Video 03 - https://www.pexels.com/video/girl-wal...
∎ Video 04 - https://www.pexels.com/video/dash-cam...
∎ Video 05 - https://www.pexels.com/video/a-view-o...
∎ Video 06 - https://www.pexels.com/video/blue-sky...
∎ Download File Setup - https://codingsnow.com
∎ Download All Source Files On Patreon - / 73662666
∎ Facebook Page - / codingsnow
∎ Instagram - / coding.snow
∎ Support From Paypal - https://paypal.me/codingsnowget
Support My Works ❤️❄️
--------------------------------------------
∎ Buymeacoffee - https://www.buymeacoffee.com/codingsnow
∎ Patreon - / codingsnow
🔗External Sources
------------------------------------
∎ Video Source - https://www.pexels.com
∎ Unicons - https://iconscout.com/unicons/getting...
∎ JQuery Libraries - https://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.
