Image Split Effect on Hover using HTML and CSS
Read the Description !!!
Hello everyone, we're back! Now, we're going to show you a cool effect that you can apply to your website.
Here we have a special split effects to the image when you hover the cursor on top of it.
so it will give the curtain-like effect and reveal the text beneath it.
Thank you for watching. Don't forget to leave a like, comment, subscribe and don't forget to click on notification
to get our latest videos.
See you in the next video!
Timestamps:
00:00 - Intro
00:16 - File Structure
00:30 - HTML Part
01:59 - CSS Part
02:28 - CSS: Set up Image Container
03:46 - CSS: Set up image size position etc
04:10 - CSS: Set up image span and hover effects
06:23 - CSS: Set up Content-Wrapper
07:00 - CSS: Customise Fonts
07:55 - Final Preview
08:17 - Closing
----- -------- ------- -------- -------- ------- -------
• Visit Our Social Media:
Instagram : / codeinstinctofficial
Facebook : / codeinstinct.official
----- -------- ------- -------- -------- ------- -------
Code Editor: Visual Studio Code
Recorded with : OBS Studio
----- -------- ------- -------- -------- ------- -------
• Music Info:
🔻
"Tokyo Music Walker - Colorful Flowers" is under a Creative Commons (CC BY 3.0) license.
https://www.youtube.com/channel/UC3lL...
🎵 Music provided by BreakingCopyright: • Free Chill Lo-Fi Music (For YouTube V...
🔺
🔻
"Tokyo Music Walker - Way Home" is under a Creative Commons (CC-BY) license.
https://www.youtube.com/channel/UC3lL...
Music promoted by BreakingCopyright: https://bit.ly/way-home-song
🔺
------ -------- --------- --------- -------- ---------
Video Created By: R.Y Baskara
#webdesign #tutorial #cssanimation