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 : Download Source Code Demo Share this:Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to print (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on WhatsApp (Opens in new window)Like this:Like Loading... Post navigation 3D Rotating Navigation