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! 😉🙂
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!
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?
Amazing hands-on tutorial, thanks!!!!
Great video, step by step with explanation! I love it!
Thank you! Delighted 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, I find your videos very helpful!!
Thanks man! Very happy to hear that 🙂
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 😉🙂
Thank you Sir!
great job keep going
Thanks mate! You too 😉💙
❤️❤️❤️❤️
😊🙏💙
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 👍💙
I am a simple man. I see Batman, I give a like!
Heheh 😁 Love it! Keep it simple 😉💙💙
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?
Are you spanish? Your accent seems like that...
Hey 🙂 I'm from Cyprus, but indeed English accent is quite similar to Spanish 😉
@@CodingJourney Ok...