Monday, March 14, 2016

Css two way hovering

                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.  Here in this code it has two style hovering one is front part and second is back part. In back part we can add images . Here in back part i only write some headings.
DEMO:-
DotnetModules

Example :-

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DotnetModules</title>
    <style type="text/css">
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            perspective: 1000;
        }
          .flip-container:hover .flipper,
            .flip-container.hover .flipper {
                -webkit-transform: perspective(800px) rotateY(180deg);
                -moz-transform: perspective(800px) rotateY(180deg);
                transform: perspective(800px) rotateY(180deg);
            }
        .flip-container,
        .front,
        .back {
            width: 100%;
            height: 100%;
        }
       .service-one {
            padding: 30px 30px 15px;
            height: 19rem;
            border-top: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
         .service-one {
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }
            .service-one.active,
            .service-one:hover {
                background-color: #31B0D5;
            }
          .flipper {
            -webkit-transition: 0.6s;
            -moz-transition: 0.6s;
            transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            position: relative;
        }
        .front,
        .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
         .front {
            z-index: 2;
            -webkit-transform: perspective(800px) rotateY(0deg);
            -moz-transform: perspective(800px) rotateY(0deg);
            transform: perspective(800px) rotateY(0deg);
        }
         .back {
            -webkit-transform: perspective(800px) rotateY(180deg);
            -moz-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="service-one  border-bottom" style="height: 200px; width: 200px;">
                <a href="javascript:void(0)">
                    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                        <div class="flipper">
                            <div class="front">
                                <div style="margin-left: 1px;">
                                    <img class="img-responsive" style="height: 90px; width: 90px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png">
                                    </img>
                                </div>
                                <h3 style="margin-left: 1px;">Welcome
                                </h3>
                                <p style="margin-left: 1px;">
                                    DotNetModules
                                </p>
                            </div>
                            <div class="back">
                                <p style="margin-left: 1px; color:white;">
                                    *  Your Welcome *
                                </p>
                                <br />
                                <p style="margin-left: 1px; color:white;">
                                    *  On My Blog *
                                </p>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </form>
</body>
</html>

0 comments:

Post a Comment