使用CSS将鼠标悬停在图像上

Question

I'm trying to do this guide: Link to Guide and I cant get that end :S, my image doesn't zoom out when I hover the image :S 我正在尝试执行本指南：指向指南的链接，但我无法达到此目的：S，当我将图像悬停在：S上时，我的图像无法缩小

The result should be something like this: Result 结果应该是这样的：结果

Here's my code: 这是我的代码：

HTML: HTML：

<body>

<div id="logo">
    <img src="img/logotipo.png" alt="logotipo" id="logotipo" class="img-responsive" />
</div>

<div class="container">
    <nav class="navbar">
        <p class="navbar-brand">JVasconcelos</i>
        <ul class="nav">
            <li><a href="#" title="Return to the Homepage">Home</a></li>
            <li><a href="#" title="Visit the Features Page">Features</a>    </li>
            <li><a href="#" title="See the prices">Pricing</a></li>
            <li><a href="#" title="Learn more about our organization">About</a></li>
            <li><a href="#" title="Contact us!">Contact</a></li>
        </ul>
    </nav>
</div>
<div class="container">
    <div class="col-md-12">

        <div class="col-md-4" id="img1">
            <img src="img/img01.png" alt="img01" class="img-responsive img-zoom" id="img01">
        </div>

    </div>
</div>
<script>
    $(document).ready(function(){
        $('.img-zoom').hover(function() {
            $(this).addClass('transition');

            }, function() {
            $(this).removeClass('transition');
            });
    });
</script>                           

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>


</body>

CSS: CSS：

/* Navbar styling */

.navbar { background: #ddd; margin-top: 200px; border-radius: 0; }
.navbar ul { list-style: none; padding: 0; margin: 0; }
.navbar li a { float: right; line-height: 80px; padding: 0 30px; text-decoration: none; color: #555; }
.navbar li a:hover { background-color: #aaa; color: #333; }
.navbar-brand { margin-left: 40px; margin-top: 15px; }

/* Logotipo */

#logo { width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -350px; }

/* COL-MD-12 */

.col-md-12 { height: 450px; background-color: #fff; text-align: center; margin-top: -20px; padding-top: 45px; }

/* COL-MD-4 */

#img1 { height: 150px; width: 150px; background-color: #333; text-align: center; color: #fff; margin-left: 20px; }
#img01 { height: 150px; width: 150px; border-radius: 1px; border-spacing: 2px; border-color: #0000000; }

/* HOVER */

.img-zoom { width: 350px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
.transition { -webkit-transform: scale(2);  -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); }

When I set up this code, I get the image possitioned where I want it, but when I hover the image, it doesn't work, and nothing happens :S What I'm doing wrong guys? 设置此代码时，我将图像放置在所需的位置，但是当我将图像悬停时，它不起作用，并且什么也没发生：S我在做错人吗？ Sorry for this long post :S 对不起，这篇长文章：S

Answer 1

You can do this with Pure CSS, which is far more simple and can be put with the rest of your CSS you've already written. 您可以使用Pure CSS做到这一点，Pure CSS更加简单，可以与您已经编写的其余CSS一起使用。

You utilize this: 您利用此：

.the-object-you-want-to-zoom:hover {
  transform: scale(2.2);
}

https://jsfiddle.net/ https://jsfiddle.net/

Answer 2

You have the demo here . 您在这里有演示。 You can add all the browser prefixes to it. 您可以向其中添加所有浏览器前缀。

Updated: 更新：

    <div id="img1">
      <img src="https://images.unsplash.com/photo-1458668383970-8ddd3927deed?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1e9d6264da3ae9cacdddcad3b63f3c04" alt="" class="img-zoom">
    </div>


.img1 {
  margin: 100px;
  width: 300px;
  height: auto;
}

#img1:hover .img-zoom {
  cursor: pointer;
  transform: scale(1.3);
}

.img-zoom {
  width: 100%;
  transform: scale(1);
  transition: all .2s ease;
}

使用CSS将鼠标悬停在图像上

问题描述

2 个解决方案

解决方案1
3 2016-06-05 21:04:44

解决方案2
2 已采纳 2016-06-05 21:06:29

使用CSS将鼠标悬停在图像上

问题描述

2 个解决方案

解决方案1 3 2016-06-05 21:04:44

解决方案2 2 已采纳 2016-06-05 21:06:29

解决方案1
3 2016-06-05 21:04:44

解决方案2
2 已采纳 2016-06-05 21:06:29