Slide-In Overlay Hover Effect (HTML & CSS)
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Learn how to implement a Slide-In Overlay Hover Effect with HTML and CSS.
Using slide-in overlays is a nice and engaging way to display additional information to the user and can also be a great space saver for a web page.
In this video, we go through a few variations of this effect, changing the slide-in direction, the overlay opacity, height etc. And finally, we use just a tiny bit of JavaScript in order to display the overlay upon a click event instead of a hover over the container element.
Enjoy 😊
Don’t forget to share, like, subscribe and I would love to hear your thoughts in the comment section below!
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Card Flip Effect (HTML & CSS): • Card Flip Effect (HTML...
Marquee-like Content Scrolling (HTML & CSS): • Marquee-like Content S...
Decide - Create - Publish - Repeat: • Decide - Create - Publ...
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
Amazing hands-on tutorial, thanks!!!!
Great video, step by step with explanation! I love it!
Thank you! Delighted to hear that 🙂
thank you, I find your videos very helpful!!
Thanks man! Very happy to hear that 🙂
I haven't seen any other video explaining the topic of "overlay" in such detail. (maybe there is) Thank you very much.
Oh thank you 🙂 Very glad you liked it!
Excellent explanation. I like that you show several options on how you can implement the overlay. Great work. Stay tuned 👍🏻
Thanks Mario! Much appreciate you taking the time to watch the video and comment! Love the work you are doing with your channel, keep it up!!
Thank you Sir!
Nice and smooth! I mean the tutorial, as well as the effect 😉 Thank you, keep it up 👍
Oh thank you, glad you liked it! You too 😉
❤️❤️❤️❤️
😊🙏💙
Keep them coming baby, much love from your home country!
Heheh! Always be chasing you...my superhero 😃💖💖
Everything is better with Batman haha. Great video :)
Heheh 🙂 Thanks man! Looking forward to see what you are creating next with your coding superpowers 😉🙂
I am a simple man. I see Batman, I give a like!
Heheh 😁 Love it! Keep it simple 😉💙💙
great job keep going
Thanks mate! You too 😉💙
Hi, this effect works for me and it's beautiful. I'm using it in a react app and it works perfectly on a local server but when I deploy my website it doesn't work on the website. Does anybody know why it wouldn't work when you deploy the react app?
How would you do this by clicking on a button in .card.main-content and on a button in card.overlay-content?
Well, you would first of course need to add a button to each of these divs, e.g.
Main (to .main-content) and
Overlay (to .overlay-content)
Then change the styling, according to your taste and needs, and in order to achieve the functionality with JavaScript:
const card = document.querySelector(".card");
const toggleSlideInBtns = document.querySelectorAll(".toggle-slide-in-btn");
toggleSlideInBtns.forEach(toggleSlideInBtn => {
toggleSlideInBtn.addEventListener("click", event => {
card.classList.toggle("slide-in");
});
});
All the best, keep coding! 😉🙂
@@CodingJourney You are a genius! Thanks!
I am starting out, trying to learn HTML/CSS and JavaScript. In the process, I am building a website, which uses cards. My cards are currently using a tooltip method based on a hover. But I did not like the functionality of them. I like the slide-in effect you showed in your video. It is better! This really helps! Again, thanks!
Amazing! Learning, while creating actual projects is the way to go 😉 Very glad you found this helpful! Keep up the good work 👍💙
Are you spanish? Your accent seems like that...
Hey 🙂 I'm from Cyprus, but indeed English accent is quite similar to Spanish 😉
@@CodingJourney Ok...