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:

----- -------- ------- -------- -------- ------- -------

- 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.
🔺

🔻
"Tokyo Music Walker - Way Home" is under a Creative Commons (CC-BY) license.
🔺

------ -------- --------- --------- -------- ---------

Video Created By: R.Y Baskara

#webdesign #tutorial #cssanimation