Web Design

Circle Hover Effects with CSS Transitions

ByFull To Tech

Jan 31, 2019
Circle Hover Effects with CSS Transitions

In this Blog, we are going to learn how to create Circle Hover Effects with CSS Transitions using CSS and HTML.
First of all, create an HTML File

HTML File : index.html

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Circle Hover Effects with CSS Transitions</title>
        <meta name="description" content="Circle Hover Effects with CSS Transitions" />
        <meta name="keywords" content="circle, border-radius, hover, css3" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/style7.css" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css' />
		<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">			
			<header>
				<h1><strong>Circle</strong> Hover Effects</h1>
				<h2>Hover effects on circles with CSS Transitions</h2>
				
			</header>
			
			<section class="main">
			
				<ul class="ch-grid">
					<li>
						<div class="ch-item">				
							<div class="ch-info">
								<div class="ch-info-front ch-img-1"></div>
								<div class="ch-info-back">
									<h3>Team</h3>
									<p>Team Designation <a href="">View on Facebook</a></p>
								</div>	
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item">
							<div class="ch-info">
								<div class="ch-info-front ch-img-2"></div>
								<div class="ch-info-back">
									<h3>Team</h3>
									<p>Team Designation <a href="">View on Facebook</a></p>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item">
							<div class="ch-info">
								<div class="ch-info-front ch-img-3"></div>
								<div class="ch-info-back">
									<h3>Team</h3>
									<p>Team Designation <a href="">View on Facebook</a></p>
								</div>
							</div>
						</div>
					</li>
				</ul>
				
			</section>
        </div>
    </body>
</html>

CSS File : style.css

@import url('normalize.css');

/* General Demo Style */
body{
	font-family: Cambria, Georgia, serif;
	background: linear-gradient(to right,rgba(2,52,55,1) 0,rgba(6,151,158,1) 100%);
	font-weight: 300;
	font-size: 15px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	overflow-y: scroll;
	overflow-x: hidden;
}
a{
	color: #555;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
	margin-top:8%;
}
.clr{
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}
.main{
	width: 90%;
	margin: 0 auto;
	position: relative;
}
.container > header{
	margin: 10px;
	padding: 20px 10px 10px 10px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
	font-size: 42px;
	line-height: 32px;
	margin: 0;
	position: relative;
	font-weight: 300;
	color: #fff;
}
.container > header h2{
	font-size: 18px;
	font-weight: 300;
	font-style: italic;
	margin: 0;
	padding: 15px 0 5px 0;
	color: #fff;
}
/* Header Style */
.codrops-top{
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.1);
}
.codrops-top a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}
.codrops-top a:hover{
	background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: left;
	display: block;
}
/* Demo Buttons Style */
.codrops-demos{
    text-align:center;
	display: block;
	line-height: 30px;
	padding: 5px 0px;
}
.codrops-demos a{
    display: inline-block;
	font-style: italic;
	margin: 0px 4px;
	padding: 0px 6px;
	color: #aaa;
	line-height: 20px;	
	font-size: 13px;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #fff;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover{
	color: #333;
	background: #fff;
}
.codrops-demos a:active{
	background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
	background: #f0f0f0;
	border-color: #d9d9d9;
	color: #aaa;
	box-shadow: 0 1px 1px rgba(255,255,255,0.7);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}

.support-note span{
	color: #ac375d;
	font-size: 16px;
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
	display: block;
}

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	-webkit-perspective: 900px;
	-moz-perspective: 900px;
	-o-perspective: 900px;
	-ms-perspective: 900px;
	perspective: 900px;
}
.ch-info{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

.ch-info .ch-info-front {
	box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

.ch-info .ch-info-back {
	-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	background: #000;
	opacity: 0;
}

.ch-img-1 { 
	background-image: url(../images/2.jpg);
}

.ch-img-2 { 
	background-image: url(../images/7.jpg);
}

.ch-img-3 { 
	background-image: url(../images/10.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: 0 15px;
	padding: 60px 0 0 0;
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:hover .ch-info-front {
	-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	opacity: 0;
}

.ch-item:hover .ch-info-back {
	-webkit-transform: rotate3d(1,0,0,0deg);
	-moz-transform: rotate3d(1,0,0,0deg);
	-o-transform: rotate3d(1,0,0,0deg);
	-ms-transform: rotate3d(1,0,0,0deg);
	transform: rotate3d(1,0,0,0deg);
	opacity: 1;
}
.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

Output :

Circle Hover Effects with CSS Transitions

 

By Full To Tech

Related Post

Web Design

Testimonials Design using HTML CSS and JavaScript

Nov 6, 2019 Full To Tech
Web Design Javascript

Strong Random Password Generator Using Javascript

Nov 4, 2019 Full To Tech
Web Design

Create awesome book style preloader using css

Oct 22, 2019 Full To Tech
0 Comments

No Comment.

You missed

Interesting Content Must Learn

Ultimate Guide to the Top Websites for Students and Professionals

Jun 27, 2023
Interesting Content Must Learn

How to Check Battery Health in Windows PC

May 31, 2023
Must Learn

Top 5 free image background remover tool

Mar 26, 2023
Must Learn

Different coding environment types used for software development

Mar 26, 2023

Welcome to Fulltotech, the go-to online blog for both new and seasoned tech enthusiasts. If you’re passionate about web designing and development, JavaScript, PHP, C++, CSS, SQL, and other related courses, you’ve come to the right place. At Fulltotech, our mission is to provide you with cutting-edge content that will keep you up-to-date with the latest trends and developments in the tech industry. In this article, we’ll delve into the details of what Fulltotech offers and how it can benefit you on your learning journey.

RCK INFOSYSTEM

I'll create a responsive website for your business

Hire me

Proudly powered by WordPress | Theme: Newspaperex by Themeansar.