Amazing Hover Effect for Categories WP

Developer
Hemant Aggarwal
Size
2,224 Kb
Views
6,072
  1. Amazing Hover Effect for Categories WP Previews
  2. Amazing Hover Effect for Categories WP HTML Codes
  3. Amazing Hover Effect for Categories WP CSS Codes
  4. Amazing Hover Effect for Categories WP JS Codes

How do I make an amazing hover effect for categories wp?

What is a amazing hover effect for categories wp? How do you make a amazing hover effect for categories wp? This script and codes were developed by Hemant Aggarwal on 09 January 2023, Monday.

Amazing Hover Effect for Categories WP Previews
IQ Test

Amazing Hover Effect for Categories WP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Amazing Hover Effect for Categories WP</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="postmetadata"> <li>Posted In&nbsp;:&nbsp;</li><a href="http://mstoic.com/category/antivirus/" title="View all posts in Antivirus" rel="category tag">Antivirus</a>, &nbsp;<a href="http://mstoic.com/category/windows/" title="View all posts in Windows" rel="category tag">Windows</a><!-- | -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Amazing Hover Effect for Categories WP - Script Codes CSS Codes

.postmetadata {height:auto; width:auto; content:""; display:table;}
.postmetadata ul { list-style-type:none; padding:5px; }
.postmetadata a, .postmetadata { text-decoration:none;color:#555; line-height:24px; font-family: Calibri; font-size:18px;}
.postmetadata a { color: #00A0D1; }
.postmetadata li { position: relative; float:left; }
.postmetadata a:hover>span, .postmetadata a:focus>span {
background-position: -100% 0;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
-o-transition: background 0.6s;
transition: background 0.6s;
}
.postmetadata a>span {
position: absolute;
pointer-events: none;
width: 100%;
height: 1px;
margin-bottom: 3px;
bottom:-5px;
left: 0;
background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #00A0D1), color-stop(5%, #00A0D1), color-stop(5%, rgba(255,255,255,0.25)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, #00A0D1,#00A0D1 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
background: -moz-linear-gradient(left, #ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
background: -o-linear-gradient(left, #ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
background: linear-gradient(left, #00A0D1,#00A0D1 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));
background-position: 100% 0;
-webkit-background-size: 200% 100%;
-moz-background-size: 200% 100%;
-o-background-size: 200% 100%;
background-size: 200% 100%;
-webkit-transition: background 0s linear;
-moz-transition: background 0s linear;
-o-transition: background 0s linear;
transition: background 0s linear;
}

Amazing Hover Effect for Categories WP - Script Codes JS Codes

$('.postmetadata a').each(function() {	$(this).append("<span></span>"); $(this).wrap('<li></li>');
});
$('.postmetadata').each(function() { $(this).wrapInner('<ul></ul>');
});
Amazing Hover Effect for Categories WP - Script Codes
Amazing Hover Effect for Categories WP - Script Codes
Home Page Home
Developer Hemant Aggarwal
Username mstoic
Uploaded January 09, 2023
Rating 3
Size 2,224 Kb
Views 6,072
Do you need developer help for Amazing Hover Effect for Categories WP?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hemant Aggarwal (mstoic) Script Codes
Name
NAV WPMANAGER
Amazing White Border Below Link
Multiple jQuery Sliders
Pop Up AAA
Simple Slider Images
Amazing Hover Effect
A Pen by Hemant Aggarwal
Continuous News Ticker jQuery
Divider Shadow
Images For ThemeForest - Envato
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!