Flip (Change) Image (Front Back) using jQuery flip Plugin and CSS

Last Reply 11 months ago By pandeyism

Posted 11 months ago

i want to show  a multiple images of one product from database on webapplication c#.like fornt and back image of mobile phone and zoom in and zoom out.

Posted 11 months ago

Hi Sadia.net,

Refer below sample.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
    <script type="text/javascript">
        $(function () {
                trigger: 'click',
                axis: 'y'
    <style type="text/css">
            height: 199px;
            width: 300px;
            margin: 0 auto;
        .flip img
            width: 300px;
            height: auto;
        .flip .back
            background: #2184cd;
            color: #fff;
            text-align: center;
    <form id="form1" runat="server">
    <div class="flip">
        <div class="front">
            <img src="Chrysanthemum.jpg" alt="" height="100px" width="100px" />
        <div class="back">
            <img src="Desert.jpg" alt="" height="100px" width="100px" />