使用jQuery在悬停时缩放图像

Question

我很喜欢jquery和js，当我将鼠标悬停在图库中的任何图像上时，我都试图创建一种放大效果。 代码如下：

HTML：

<section class="wrapper special" id="two">
    <div class="inner">
        <header class="major narrow">
            <h2>More Pictures/Works</h2>
            <p>Ipsum dolor tempus commodo turpis adipiscing Tempor placerat sed amet accumsan</p>
        </header>
        <div class="image-grid">
            <a class="image" href="#"><img alt="" src="images/pic01.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic02.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic03.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic04.jpg"></a>
            <a class="image" href="#"><img alt="" src="images/pic5.jpg"></a>
        </div>
    </div>
</section>

CSS：

.image-grid {
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 4em;
}
.image-grid .image {
    margin: 0;
    width: 25%;
}
.image-grid .image img {
    width: 100%;
}

提前致谢！

Answer 1

试试这个小提琴：

// when the mouse moves over an image
$('a.image > img').on('mouseover', function() {

    // add a class to make the image bigger
    $(this).addClass('bigImage');

});

https://jsfiddle.net/msgzb3km/1/

基本上，这是在鼠标移到图像上时添加一个特殊的类。 您可以定义类，以根据需要增加图像大小。 javascript的第二部分告诉jQuery将鼠标移出后删除代码。

希望这可以帮助。

Answer 2

当您还想在项目上使用jQuery做其他事情时，可以通过创建一个定义动画的过渡类来实现：

.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

在悬停时，在悬停时分配此类：

$(document).ready(function(){
    $('.image').hover(function() {
        $(this).addClass('transition');
        // other code     
    }, function() {
        $(this).removeClass('transition');
    });
  });

您可以在此处找到示例： https ： //jsfiddle.net/1Lm3px2g/

但这有点矫kill过正，因为您可以通过像Mohamed-Yousef建议的CSS定义:hover -style来获得相同的结果。

.image-grid .image:hover {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

示例： https ： //jsfiddle.net/mohamedyousef1980/1Lm3px2g/1/