Intoduction :-
Hii Friends...
Today I explain how to make css hovering fill circle.hover selector is used to select elements when you mouse over them. When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.
Dotnetmodules
<head runat="server">
<title>Dotnetmodules</title>
<style>
.workBlock{ max-width:832px; margin:55px auto 50px auto;}
.roundBox{ display:block; width:208px; height:208px; border:1px solid #dddddd; border-radius:100%; float:left; position:relative; }
.roundBox .icon{ margin-top:35px; text-align:center; clear:coth; display:block;}
.roundBox h4{ font-size: 20px; font-family: Arial; text-align: center; color: #000000; text-transform: uppercase; margin: 133px 0 0 0;}
.roundBox .num{ position:absolute; width:49px; height:49px; background:#fff; border-radius:100%; font-family: 'nexa_boldregular'; font-size:23px; text-align:center; line-height:50px; bottom:-25px; left:50%; margin-left:-25px; display:block; z-index:5; }
.roundBox .arrow{ position:absolute; width:49px; height:49px; background:#fff; border-radius:100%; top:50%; margin-top:-25px; right:-25px; display:block; z-index:5; padding-top:10px; text-align:center; }
.roundBox .arrow.bgnone{ background:none;}
.roundBox .hoverBox{ background:#00adef; border:1px solid #00adef; opacity:0; position:absolute; width:100%; height:100%; left:0; top:0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:100%;
display:table;
}
.roundBox:hover .hoverBox{ opacity:1; border-radius:100%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.roundBox .hoverBox p{ font-size:24px; color:#fff; text-align:center; font-family:Arial; padding:0 15px; display:table-cell; vertical-align:middle; }
.roundBox.heighilight{ background:#fff; }
.roundBox.heighilight .hoverBox:hover{ background:#1564af; -webkit-transform: scale(1); border:1px solid #1564af;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:100%;
}
</style>
</head>
<body>
<article class="roundBox">
<div class="icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" style="height: 128px; width: 195px;" alt="" /> </div>
<div class="hoverBox">
<p> Welcome <br> <span class="item_price">DotNetModules</span></p>
</div>
</article>
</body>
</html>
Hii Friends...
Today I explain how to make css hovering fill circle.hover selector is used to select elements when you mouse over them. When we put a cursor on the image the hovering is work and fill the circle on hovering color that you want to fill.
DEMO:-
Welcome
DotNetModules
Example :-
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>Dotnetmodules</title>
<style>
.workBlock{ max-width:832px; margin:55px auto 50px auto;}
.roundBox{ display:block; width:208px; height:208px; border:1px solid #dddddd; border-radius:100%; float:left; position:relative; }
.roundBox .icon{ margin-top:35px; text-align:center; clear:coth; display:block;}
.roundBox h4{ font-size: 20px; font-family: Arial; text-align: center; color: #000000; text-transform: uppercase; margin: 133px 0 0 0;}
.roundBox .num{ position:absolute; width:49px; height:49px; background:#fff; border-radius:100%; font-family: 'nexa_boldregular'; font-size:23px; text-align:center; line-height:50px; bottom:-25px; left:50%; margin-left:-25px; display:block; z-index:5; }
.roundBox .arrow{ position:absolute; width:49px; height:49px; background:#fff; border-radius:100%; top:50%; margin-top:-25px; right:-25px; display:block; z-index:5; padding-top:10px; text-align:center; }
.roundBox .arrow.bgnone{ background:none;}
.roundBox .hoverBox{ background:#00adef; border:1px solid #00adef; opacity:0; position:absolute; width:100%; height:100%; left:0; top:0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:100%;
display:table;
}
.roundBox:hover .hoverBox{ opacity:1; border-radius:100%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.roundBox .hoverBox p{ font-size:24px; color:#fff; text-align:center; font-family:Arial; padding:0 15px; display:table-cell; vertical-align:middle; }
.roundBox.heighilight{ background:#fff; }
.roundBox.heighilight .hoverBox:hover{ background:#1564af; -webkit-transform: scale(1); border:1px solid #1564af;
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:100%;
}
</style>
</head>
<body>
<article class="roundBox">
<div class="icon">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" style="height: 128px; width: 195px;" alt="" /> </div>
<div class="hoverBox">
<p> Welcome <br> <span class="item_price">DotNetModules</span></p>
</div>
</article>
</body>
</html>
0 comments:
Post a Comment