Beautiful Circle Hover Effects Using CSS3 And HTML5

Pretty hover effects on circles with CSS Transitions

Hello friends, today I will show you how to create beautiful circle hover effects using CSS3 and HTML5. These circle hover effects will add a pinch of flavors and design to your website. Here are the steps:

Step 1 :

Set up a div in an HTML page: say page name index.html

[code lang=”html”]<section class="main">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Use what you have</h3>
by Mehul <a href="#">View on Meul Tech </a>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3>Common Causes of Stains</h3>
by Mohnish <a href="#">View on Meul Tech </a>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<h3>Lightning</h3>
by Ashuta <a href="#">View on Meul Tech </a>
</div>
</div>
</li>
</ul>
</section>[/code]

Step 2 : Create file common.css and include in html.

[code lang=”css”].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;
}[/code]

Step 3 : Create file style.css and include in html.

[code lang=”css”].ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

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

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

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

.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);

-webkit-backface-visibility: hidden;

}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 140px;
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);
opacity: 0;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}

.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 {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.ch-item:hover .ch-info p {
opacity: 1;
}[/code]

Effect 2 : Out To In Effect

[code lang=”css”].ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 0 rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

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

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

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

.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);

-webkit-backface-visibility: hidden; /*for a smooth font */

}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 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:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
box-shadow:
inset 0 0 0 110px rgba(200,95,66, 0.4),
inset 0 0 0 16px rgba(255,255,255,0.8),
0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
opacity: 1;

-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}[/code]

Effect 3 : Circle Hover Effects

Effect 4 : Circle Hover Effects

Effect 5 : Circle Hover Effects

Effect 6 : Circle Hover Effects

Effect 7 : Circle Hover Effects

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.