how to Add zoom effect to image with css and jquery

ipanridha (39)in #utopian-io • 7 years ago (edited)

What Will I Learn?

you will learn jquery hover event
you will learn css transform function

Requirements

You have basic about java script
You have basic about css

Difficulty

Basic

Tutorial Contents

There are many plugins available to add special effects to the image when the cursor moves over the image (hovering the image). All of these plugins include a lot of code on the web page that might affect the page speed when it is loaded (lemot). If you want to use less code and avoid those slow issues, this zoom image effect script is the right choice for you.
In this tutorial we will add zoom effect on when in hover by using jqury and css.

In making it I use notepad + +, and browser chrome
The first stage is to create an html file with the name zoom.html.
Then create an html element, like this:

<html>
       <head>
    <title> efek zoom</title>
       </head>
       <body>
       </body>
</html>

Put an image into the same folder as your html file, then Make a command <src> to call <img>, like this:

<img src="cat.jpg" class="zoom"/>

<img src>: call the existing image in the same folder, <class>: specify the class used by <img>
Then create a command to call file.css, like this:

<link rel = "stylesheet" href = "style.css">

<rel>: declare a page relationship with a link,< href>: create a link.
Next we have to download and host the jquery file, if you do not have it you can download here, we will add the jquery code into <head>, this is the jquery code I use :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

The next step, we will create a command to activate the zoom effect, the code created must be between <script> .. </ script.>, As usual to start the script, we will first enter the ready function, like this:

$(document).ready(function(){
...
    });

$ (document) .ready: start the document, (function(){ : open a function
Add event hover to enable zoom effect, like this:

$('.zoom').hover(function() {
...
    });

$ ('. zoom').: is a class of <img>, hover is hover event, (function () { : open a function, }); close function.
Then create a command to add a class

$ (this) .addClass ('transition');

$ (this) .addClass: adds a new class, ('transitions') : the name of the class.
Then add a new function, like this:

$ (this) .removeClass ('transition');

$ (this) .removeClass : delete class, ('transition') : the name of the class that will be deleted.
Here full code of zoom.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.zoom').hover(function() {
        $(this).addClass('transisi');
    }, function() {
        $(this).removeClass('transisi');
    });
});  
</script>
</head>
<body>
<center>
<h1> menambah efek zoom pada image </h1>
<img src="cat.jpg" class="zoom"/>
</center>
</body>
</html>

Here is output before add css :

Once the html file is created successfully. Then create a css file named style.css
Create a style for class <zoom>, this class serves to show the initial appearance of the image. Like this:

img.zoom {
    width: 300px;
    height: 175px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;

img.zoom: name of class,width and height: set the initial size of the image, webkit- transition and moz-transition: set transition speed, east in: slow at the beginning,east-out: fast at the beganning.
then create a class for transition, like this:

.transisi {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);

transform: scale (1.8): enlarge the image scale as 1.8 x.
here full code of style.css :

img.zoom {
    width: 300px;
    height: 175px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;  
}
.transisi {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}

run the program and close the cursor on the image
Live Demo
Here is output after add css :

Posted on Utopian.io - Rewarding Open Source Contributors

#tutorial #jquery #css

7 years ago in #utopian-io by ipanridha (39)

Sort:

knowledges (69) 7 years ago

Hello @ipanridha, it was discovered that this content has already been submitted somewhere else over the internet before [Link].

Same contents already shared before in Utopian or anywhere else by different users may still be rejected if a moderator recognises plagiarism.

For this reason, this contribution will be unvoted. Thank you
You can contact us on Discord.
[utopian-moderator]

$1.80

2 votes

[-]

utopian.tip (46) 7 years ago

Hey @knowledges, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

$0.00

[-]