Animated border lines on hover

Developer
Simon Codrington
Size
3,590 Kb
Views
18,216
  1. Animated border lines on hover Previews
  2. Animated border lines on hover HTML Codes
  3. Animated border lines on hover CSS Codes
  4. Animated border lines on hover JS Codes

How do I make an animated border lines on hover?

What is a animated border lines on hover? How do you make a animated border lines on hover? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Animated border lines on hover Previews
IQ Test

Animated border lines on hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated border lines on hover</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,500|Source+Sans+Pro:400,700,900'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
https://docs.google.com/uc?id=0B7UPM0QugWUjQVlzT0VpTmdYbG8
https://docs.google.com/uc?id=id=0B7UPM0QugWUjM3hoVjU5VURYQlk
https://docs.google.com/uc?id=0B7UPM0QugWUjbkR2Um9YZ2pnNzQ
https://docs.google.com/uc?id=0B7UPM0QugWUjNVVVay1vYkRIV1E
https://docs.google.com/uc?id=0B7UPM0QugWUjOW1IZUhQWFhxN2c
https://docs.google.com/uc?id=0B7UPM0QugWUjR1p1VmRUNVpRZFU
-->
<div class="wrapper"> <div class="row"> <section class="header"> <h1>Animated Fancy Cards</h1> <p>Showcases how you can use micro-interactions to fancy up your standard block / grid layouts. Each card shows additional info when you hover / select them</p> </section> <section class="cards cf"> <article class="fancy-card one"> <div class="bg-overlay"></div> <div class="v-border"></div> <div class="h-border"></div> <div class="content"> <div class="primary"> <h2>Dev Catch-Up</h2> </div> <div class="secondary"> <h3>Catch up with the devs </h3> <p>10/11/2016 - 4.00pm</p> <p>Come and join us for our next upcoming developer catch up. See what the devs do</p> <a class="button">Book Today</a> </div> </div> </article> <article class="fancy-card two"> <div class="bg-overlay"></div> <div class="v-border"></div> <div class="h-border"></div> <div class="content"> <div class="primary"> <h2>New Tech Insights</h2> </div> <div class="secondary"> <h3>Get the latest news</h3> <p>02/01/2017 - 3.30pm</p> <p>Join an indepth discussion from our team of experts on the latest tech news</p> <a class="button">Book Today</a> </div> </div> </article> <article class="fancy-card three"> <div class="bg-overlay"></div> <div class="v-border"></div> <div class="h-border"></div> <div class="content"> <div class="primary"> <h2>Updated Research</h2> </div> <div class="secondary"> <h3>It's all new and improved</h3> <p>12/02/2017 - 1.30pm</p> <p>We look at our updated research techniques and how everything has changed</p> <a class="button">Book Today</a> </div> </div> </article> </section> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated border lines on hover - Script Codes CSS Codes

body{ font-family: 'Roboto', sans-serif; font-weight: 400;
}
h1,h2,h3,h4,h5,h6{ font-family: 'Source Sans Pro', sans-serif; font-weight: 900; letter-spacing: 0.25px;
}
.wrapper{ padding: 30px 15px;
}
.row{ max-width: 1024px; margin: 0px auto;
}
*,*:before,*:after{ box-sizing: border-box;
}
.cf:before,
.cf:after{ display: table; content: " ";
}
.cf:after{ clear: both
}
.header{ text-align: center; padding: 0px 15px; margin-bottom: 30px;
}
.header h1{ font-size: 2.8rem;
}
.header p{ font-size: 1.3rem; line-height: 150%;
}
/*fancy card styling*/
.cards{
}
.fancy-card{ background: #eee; width: 100%; display: block; float: left; position: relative; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); transition: all 250ms ease-in; min-height: 300px; background-size: cover; background-position: center center; margin-bottom: 30px;
}
.fancy-card.one{ background-image: url("https://docs.google.com/uc?id=0B7UPM0QugWUjQVlzT0VpTmdYbG8");
}
.fancy-card.two{ background-image: url("https://docs.google.com/uc?id=0B7UPM0QugWUjbkR2Um9YZ2pnNzQ");
}
.fancy-card.three{ background-image: url("https://docs.google.com/uc?id=0B7UPM0QugWUjNVVVay1vYkRIV1E");
}
.fancy-card .bg-overlay{ background: rgba(0,0,0,0.25); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: all 200ms linear;
}
.fancy-card .content{ padding: 30px 40px; color: #fff; text-align: center; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-wrap: nowrap; align-items: center; flex-direction: row;
}
.fancy-card .content .primary{ text-transform: uppercase; width: 100%; transition: all 250ms ease-out 200ms; opacity: 1; transform: translate3d(0px, 0px, 1px);
}
.fancy-card .content .secondary{ position: absolute; opacity: 0; left: 0px; transform: translate3d(0px, 30px, 1px); transition: all 200ms linear 0ms; padding-left: 35px; padding-right: 35px;
}
.fancy-card .button{ border: solid 1px #fff; padding: 8px 12px; display: inline-block; border-radius: 2px; margin: 12px auto;
}
/*horizontal border elements (top & bottom)*/
.fancy-card .v-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
}
.fancy-card .v-border:before,
.fancy-card .v-border:after{ width: 0%; height: 1px; left: 50%; transition: all 250ms ease-out; background: #fff;
}
.fancy-card .v-border:before{ content: ''; top: 10%; position: absolute;
}
.fancy-card .v-border:after{ content: ''; bottom: 10%; position: absolute;
}
/*horizontal elements (left & right)*/
.fancy-card .h-border{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;
}
.fancy-card .h-border:before,
.fancy-card .h-border:after{ height: 0%; top: 50%; width: 1px; transition: all 250ms ease-out; background: #fff;
}
.fancy-card .h-border:before{ content: ''; left: 10%; height: 0%; position: absolute;
}
.fancy-card .h-border:after{ content: ''; right: 10%; position: absolute;
}
/*hover states for interactivity*/
.fancy-card:active .v-border:before,
.fancy-card:active .v-border:after,
.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after{ width: 90%; left: 5%;
}
.fancy-card:active .h-border:before,
.fancy-card:active .h-border:after,
.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after{ height: 90%; top: 5%;
}
/*hovering over card, shadow effect*/
.fancy-card:active,
.fancy-card:hover{ box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.3);
}
/*hovering over card, adjust primary element*/
.fancy-card:active .content .primary,
.fancy-card:hover .content .primary{ opacity: 0; transform: translate3d(0px, 20px, 1px); transition: all 200ms linear 0ms;
}
/*hoverijng over card, adjust secondary element*/
.fancy-card:active .content .secondary,
.fancy-card:hover .content .secondary{ opacity: 1; transform: translate3d(0px, 0px, 1px); transition: all 200ms linear 200ms;
}
/*hovering over card, adjust background overlay*/
.fancy-card:active .bg-overlay,
.fancy-card:hover .bg-overlay{ background: rgba(0,0,0,0.45);
}
/*medium and large profiles*/
@media screen and (min-width: 768px){ .fancy-card{ width: 30%; margin: 0% 1.66% 3.33% 1.66%; }
}

Animated border lines on hover - Script Codes JS Codes

jQuery(document).ready(function($){
});
Animated border lines on hover - Script Codes
Animated border lines on hover - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 3,590 Kb
Views 18,216
Do you need developer help for Animated border lines on hover?

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!

Simon Codrington (simoncodrington) Script Codes
Name
Foundation 6 Interchange
CSS animations on scroll - Slide in from left
Test iFrame
Animating single characters in a string
Stripe Header Grid
CSS animations on scroll - Multi step move
Mobile Navigation Menus - Menu slide from left
CSS animations on scroll - Fade from bottom up
Foundation 6 - Flex Grid
Mobile Navigation Menus - Scale from 0 to 1 open
Create amazing blog posts 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!