Description:-

Hello everyone! In this video, you are going to learn " Hover animation (before / after) with Text - Using HTML & CSS".

Let's see!

You Might Also Like ➝

•Glowing Neon Button With Hover effect

• Custom Select Box - Using HTML & CSS

• Awesome Web Page Preloader - Using HTML & CSS

• Flame Effect Text - Using HTML & CSS

• The Glassmorphism Social Button | Using HTML & CSS

• 12 Best WordPress Themes for Your 2021 Projects

• Top 40 HTML Interview Questions | HTML5 Intervie

All the source codes and source files and available to download from here. Copy and paste the code from the text editors. First, try it by following the video tutorial. It will help you to understand all of it. After that, if you have got something wrong with your code use the given source codes to compare with yours. It will help you to understand all of it and your mistakes.

Source code:-

Hover animation (before / after) with Text - Using HTML & CSS

HTML

CSS

body {
	margin: 0;
	padding: 0;
	background-color: yellow;
	overflow: hidden;
}

.wrapper {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
  
}

h1 {
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-size: 75px;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
	color: #9036d4;
}

h1:after,
h1:before {
	content: "";
	position: absolute;
	z-index: -1;
	height: 100px;
	width: 100px;
	transition-duration: .7s;
	border: 0 solid #fff;
	opacity: 0.7;
}

h1:before {
	border-right-width: 10px;
	border-top-width: 10px;
	border-right-color: #000;
	border-top-color: #000;
	right: -35px;
	top: -25px;
}

h1:after {
	border-bottom-width: 10px;
	border-left-width: 10px;
	bottom: -25px;
	left:-35px;
}

h1:hover:before,
h1:hover:after {
	width: 100vw;
	height: 100vh;
	opacity: 1;
}

.wrapper h1 a:focus {
	color: #9036d4;
	outline: none;
}

h1:focus-within:before,
h1:focus-within:after {
	width: 100vw;
	height: 100vh;
	opacity: 1;
}

Join Our Official Telegram Community for more Projects with Source Code and Job updates.

~~full-width~~

Hover animation (before / after) with Text - Using HTML & CSS

Description:-

You Might Also Like ➝

Source code:-

Hover animation (before / after) with Text - Using HTML & CSS

HTML

CSS

Post a Comment

Contact Form