Friday, March 11, 2016

Css hovering fill circle boundary with images bounce

                No comments   

Intoduction :- 
Hii Friends...
Today I explain how to make css hovering fill circle  boundary with images bounce .
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.  And the images is give a little bounce.

DEMO:-
DotnetModules

Example :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotnetModules</title>
    <style type="text/css">
         .service-box .icon
        {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #18639D;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        .service-box .icon img
        {
            position: relative;
            z-index: 100;
            transition: all 0.3s ease 0s;
        }
        .service-box .icon:before
        {
            content: '';
            width: 102%;
            height: 102%;
            border-radius: 50%;
            background: #dfdfdf;
            position: absolute;
            top: -1px;
            left: -1px;
            z-index: 10;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
            transition: all 0.3s ease 0s;
        }
        .service-box:hover .icon img
        {
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
        }
        .service-box:hover .icon:before
        {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
        .service-box h5
        {
            font-size: 1.4em;
            color: #252525;
            margin: 1em 0em 0.5em 0em;
        }
        .service-box p
        {
            color: #333333;
            margin: 0;
            line-height: 1.8em;
            width: 95%;
            font-size: 1em;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="specialty-grids-top">
        <div class="col-md-2 service-box" style="visibility: visible; margin: 1%; margin-left: 1em;
            -webkit-animation-delay: 0.4s;">
            <figure class="icon">
                <span><img src="http://bulletpay.in/images/airtel.png"></span>
            </figure>
        </div>
    </div>
    </form>
</body>
</html>

 

0 comments:

Post a Comment

Popular Posts