Circle border hover effect

Developer
Kyle Houston
Size
2,195 Kb
Views
36,432
  1. Circle border hover effect Previews
  2. Circle border hover effect HTML Codes
  3. Circle border hover effect CSS Codes

How do I make an circle border hover effect?

What is a circle border hover effect? How do you make a circle border hover effect? This script and codes were developed by Kyle Houston on 25 August 2022, Thursday.

Circle border hover effect Previews
IQ Test

Circle border hover effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circle border hover effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="//www.google.com" class="thumb-ctn"> <div class="thumb"></div>
</a>
</body>
</html>

Circle border hover effect - Script Codes CSS Codes

* { padding: 0; margin: 0;
}
body { background: lightBlue;
}
.thumb-ctn { width: 208px; height: 208px; position: absolute; top: 50%; left: 50%; -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); display: block;
}
.thumb-ctn:after { content: ''; position: absolute; background: lightCyan; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 0 solid white; top: -5px; right: -5px; bottom: -5px; left: -5px; -moz-transition: border 0.25s; -o-transition: border 0.25s; -webkit-transition: border 0.25s; transition: border 0.25s;
}
.thumb-ctn:hover:after { border: 15px solid white;
}
.thumb { background: url("//lorempixel.com/output/nightlife-q-c-208-208-4.jpg") no-repeat 0 0; background-size: cover; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 100%; height: 100%;
}
Circle border hover effect - Script Codes
Circle border hover effect - Script Codes
Home Page Home
Developer Kyle Houston
Username styler
Uploaded August 25, 2022
Rating 3
Size 2,195 Kb
Views 36,432
Do you need developer help for Circle border hover effect?

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!

Kyle Houston (styler) Script Codes
Name
Material Design Card Hover
Material Design Ripple Button
ReactJS Instragram Feed
Dropdown Navigation
Movie App - Detailed View - Adding a watchlist button - RESOLVED
Fluid grid
CSS3 Preloader
Word ticker
Mobile Menu Button
Backbone 101 - Movie App
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!