Question

script type="text/javascript">    </script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/path/to/jquery.flip.min.js"></script>
    <script>
        $(function () {
            $(".flip").flip({
                trigger: 'hover'
            });
        });
    </script>
    <scrip>
        $(function () {
            $(".flip").flip({
                trigger: 'hover',
                axis: 'x'
            });
        });
    </script>

    <style>
        .flip
        {
            height: 199px;
            width: 300px;
            margin: 0 auto;
        }
        .flip img
        {
            width: 300px;
            height: auto;
        }
        .flip .back
        {
            background: #2184cd;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="flip">
        <div class="front"> 
            <img src="images/pic/70.jpg" alt="" />
        </div>
        <div class="back">
            <h3>
                Some Text in the Back!</h3>
        </div>
    </div>
    </form>

我已经为它写了下面的代码，但代码不工作它显示图像和文本下面我想要翻转注意：如果我只需要前面和背景作为图像而不是文本，我该怎么办。[这是上面代码的结果。]我想要的是当我将鼠标悬停在图像上时它会翻转并显示文本。注意我应该怎么做如果我想要不同的图像，那就做吧！

Answer 1

我认为这是您的完美答案。

.flip
        {
            height: 199px;
            width: 300px;
            margin: 0 auto;
        }
        .flip img
        {
            width: 300px;
            height: auto;
        }
        .flip .back
        {
            background: #2184cd;
            color: #fff;
            text-align: center;
        }

<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script>
<script>
  $(function () {
    $(".flip").flip({
      trigger: 'hover'
    });
  });
</script>
<script>
  $(function () {
    $(".flip").flip({
      trigger: 'hover',
      axis: 'y'
    });
  });
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div class="flip">
      <div class="front">
        <img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
      </div>
      <div class="back">
        <img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" />
      </div>
    </div>
  </form>
</body>

Answer 2

我只是尝试了纯粹的CSS和HTML。请看看

go through this beside link http://jsfiddle.net/cjaLhdjo

我正在制作翻转图像，但它不起作用

2 个答案: