CODEWITHSUNDEEP
javascriptjqueryhtmlcssflip
user474901
user474901

Reputation:

How to switch the images on hover using flip plugin

I wonder how to use this flip plugin to make 3d rollover transition compatible with IE9 (clients request). I can make it work but I have two pngs and I want on mouse hover to switch from rollover1.png to rollover2.png. So far it does rollover1.png

  <!DOCTYPE html>
    <html>
    <style type="text/css">
    .flipbox {
    width: 108px;
    height: 108px;
    line-height: 108px;
    background-color: #ff9000;
    font-family: 'ChunkFive Regular', Tahoma, Helvetica;
    font-size: 2.5em;
    color: #ffffff;
    text-align: center;
    }   

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script src="jquery.flip.min.js"></script>

    <body>

    <div class="flipbox">
        <img src="rollover1.png" alt="Unlock Your Potential"/>
        <img src="rollover2.png" alt="jjjj"/>
    </div>

    <div class="flipPad">

    <a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">

    </a>
    </div>

    </body>
    <script>

    $(function(){
        $('.flipbox').hover(function(){
        $('.flipbox').flip({
            direction:'tb'
            });
        });
    });

    </script>
    </html>

Upvotes: 0

Views: 10994

Answers (1)

webcoder
webcoder

Reputation: 629

Following sites have good demo for how to implement flip effect on hover:

http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html

http://blog.mgechev.com/2013/05/04/css3-flipping-effect/

HTML:

<div class="panel">
    <div class="front card">
    </div>
    <div class="back card">  
    </div>
</div>

CSS:

.panel {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
    background-image: url(http://img.afreecodec.com/images/v3/wp-content/uploads/2011/05/00_chrome_icon.jpg);
}

.back {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);  
    transform: rotateX(-180deg);  
    background-image: url(http://www.digitaltrends.com/wp-content/uploads/2011/03/ie-9-icon.jpg);
}

.panel:hover .front {
    z-index: 1;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.panel:hover .back {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

JSFiddle Example: http://jsfiddle.net/mgechev/GpK25/16/

Using JS:

http://jsfiddle.net/mornaistar/eHfUa/

http://jsfiddle.net/azizpunjani/JfUbW/

Upvotes: 2

Related Questions