使用 CSS 悬停时放大图像答案

【问题标题】：Image zoom on hover with CSS使用 CSS 悬停时放大图像
【发布时间】：2016-06-05 20:53:32
【问题描述】：

我正在尝试执行此指南：Link to Guide，但我无法做到这一点：S，当我将图像悬停时，我的图像不会缩小：S

结果应该是这样的：Result

这是我的代码：

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：

/* 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); }

当我设置此代码时，我将图像定位在我想要的位置，但是当我将图像悬停时，它不起作用，并且没有任何反应：S 我做错了什么伙计们？很抱歉这篇长篇文章：S

【问题讨论】：

您使用 jQuery 而不是纯 css 是否有特定原因？您还可以查看 devtools 以查看该元素是否确实获得了其上设置的类？
它的教程我发现我想要什么效果：S 我没有找到如何在纯 css 上做到这一点，我是新手编码：S

标签： jquery html css hover

【解决方案1】：

您可以使用 Pure CSS 来做到这一点，这要简单得多，并且可以与您已经编写的其他 CSS 一起使用。

你利用这个：

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

https://jsfiddle.net/

【讨论】：

【解决方案2】：

您有demo here。您可以为其添加所有浏览器前缀。

更新：

    <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;
}

【讨论】：

如果我设置了这个，我所有的容器都会被移动：.container { margin: 100px;宽度：300px；高度：自动； } .container:hover .image { 光标：指针；变换：比例（1.3）； }
@JoseAntonio 很抱歉我使用了引导程序特定的类，让我调整一下
@Dejan.S 你仍然可以，你只需要更正你的transform 属性。它目前显示scale(1) 而不是scale(1.1) 或2.2、3.3 等等。
@JoshCrowe 不确定我是否跟着你。 scale(1)在图片上是原始状态，基本没有效果。
.img-zoom:hover { transform: scale(1.2); }