Wednesday, March 9, 2016

Css hovering fill circle

                No comments   

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.   
DEMO:-
Dotnetmodules

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

Popular Posts