CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Myra_
Myra_

Reputation: 3

Zoom images on hover with jquery

I suck at jquery and js and I'm trying to create a zoom in effect when hovering over any of the images in my gallery. the code is as follows:

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

Thanks in advance!

Upvotes: 0

Views: 4599

Answers (2)

Robin V.
Robin V.

Reputation: 1542

When you want to do other stuff with jQuery on the item as well, you could achieve this by creating a transition class where you define the animation:

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

And on hover assigning this class on hover:

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

You can find an example here: https://jsfiddle.net/1Lm3px2g/

But this is a bit overkill since you can get the same result by defining :hover-style with CSS like Mohamed-Yousef suggested.

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

Example: https://jsfiddle.net/mohamedyousef1980/1Lm3px2g/1/

Upvotes: 1

Hen
Hen

Reputation: 176

Try this fiddle:

// 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/

Basically what this does is add a special class when the mouse moves over the image. You can define the class to make the image size increase however you like. The second bit of javascript tells jQuery to remove the code after you have moved the mouse out.

Hope this helps.

Upvotes: 1

Related Questions