I have no talent at all. I am only passionate about understanding

Article

20 Zoom Effect CSS Javascript For Websites

20 Zoom Effect CSS Javascript For Websites


October, 13 2021

In today's article we will learn how to create a zoom effect for elements in Website with HTML, CSS and Javascript!

How to Create a CSS Zoom Effect

To create a zoom effect for elements in the web page, we will use the . attribute transform: scale(value) in CSS. With a value of:

  • value < 1: Shrink the object.
  • value = 1: Default object value.
  • value > 1: Enlarge the object.

Now let's go into how to create basic hover zoom effect for web page!

HTML

 <h1>Hiệu ứng Zoom</h1>
<p>Bạn hãy hover vào thẻ div bên dưới</p>
<div class="zoom"></div>

Now we will go into creating the zoom effect when the user hovers on the div tag with the class zoom with CSS!

CSS

.zoom {
  padding: 50px;
  background-color: DodgerBlue;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
/*Hiệu ứng zoom*/
.zoom:hover {
  transform: scale(1.5);
}

And the final result you can see below:

See the Pen Tao hieu ung zoom hover by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

How to Create a CSS Zoom-In Effect

Next we will learn how to create a zoom-in effect for an image when the user hovers through it Please go through the following code:

HTML

 <h3>Hiệu Ứng Zoom In</h3>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoomin noidung">
<img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1597819923/y2mnobp2xxbujtf2ptsf.jpg" title="Hiệu Ứng Zoom in" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomin img:hover {
    transform: scale(1.5);
}

And the final result you can see below!

See the Pen NWNbdQJ by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Actually, it still zooms like the first example, but here I have set the attribute overflow: hidden; hides the overflowing parts of the image from the noidung class. Therefore, it will cause the user to zoom in without changing the width of the image.

How to Create a CSS Zoom-Out Effect

Next we will go into creating the zoom out effect with HTML and CSS!

HTML

 <!--Niềm Vui Lập Trình-->
<h3>Hiệu Ứng Zoom Out</h3>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoomout noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomout img {
 height: 300px;
  width: 300px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomout img:hover {
  height: 200px;
  width: 200px;
}

Here I will create a zoom out effect by changing the width and height of the image when hover user. And to understand better, see the following results!

See the Pen hieu ung zoom out by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

How to Create a CSS Zoom-Rotate Effect

In this section we will combine two attributes scale and rotate to create an effect.

HTML

 <!--Niềm Vui Lập Trình-->
<h3>Hiệu Ứng Zoom Rotate</h3>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoom_rotate noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoom_rotate img {
  height: 300px;
  width: 300px;
  transition: transform .5s ease-in-out;
}
.zoom_rotate img:hover {
  transform: scale(1.8) rotate(-30deg);
}

And the results you can see below:

See the Pen hieu ung zoom-rotate by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

How to Create CSS Zoom-Blur Effect

We will learn how to create a zoom-blur effect by combining two properties scale and filter in CSS!

HTML

 <!--Niềm Vui Lập Trình-->
<h3>Hiệu Ứng Zoom Rotate</h3>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoom_blur noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoom_blur img {
 height: 300px;
  width: 300px;
 transition: transform 1s, filter 2s ease-in-out;
  filter: blur(3px);
  transform: scale(1.2);
}
.zoom_blur img:hover {
  filter: blur(0);
  transform: scale(1);
}
.zoom_blur img:hover {
  filter: blur(0);
  transform: scale(1);
}

And the results you can see below:

See the Pen hieu ung zoom-blur by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

How to Create a CSS Zoom-Color Effect

This part we will go into how to create zoom-color effect using HTML and CSS!

HTML

 <!--Niềm Vui Lập Trình-->
<h3>Hiệu Ứng Zoom Color</h3>
<p>Bạn hãy hover vào ảnh bên dưới nhé</p>
<div class="zoom_color noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1595479692/yfs2qgeyuccvfzhaci3f.jpg"  title="Hiệu Ứng Zoom Out" />
</div>

CSS

 .noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoom_color img {
  height: 300px;
  width: 300px;
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}
.zoom_color img:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}

And the results you can see below:

See the Pen hieu ung zoom-color by haycuoilennao19 (@haycuoilennao19) on CodePen.

Link

Image Hover Zoom Effect

Image Hover Zoom Effect

You can see the results below.

See the Pen Image Hover - Zoom Effect (Background-image) by Boomer (@CodeBoomer) on CodePen.

Link

CSS Image Zoom

 CSS Image Zoom

You can see the results below.

See the Pen CSS Image Zoom on Hover by Ricardo Prieto (@ricardpriet) on CodePen.

Link

Infinite Image Zoom Effect CSS

See the Pen Infinite image zoom effect with pure CSS by Jose Quintana (@joseluisq) on CodePen.

Link

Image Zoom Jquery

See the Pen Clean Image Zoom [Mostly CSS] by Philip M (@pletron) on CodePen.

Link

Bootstrap Carousel Zoom Effect

See the Pen Bootstrap Carousel Zoom Effect by Altaf Hussain Patel (@altafhpatel) on CodePen.

Link

CSS Transform Zoom

CSS Transform Zoom

You can see the results below.

See the Pen Romantic Zoom Effect by Adrien Bachmann (@AdrienBachmann) on CodePen.

Link

CSS Hover Zoom Scale

CSS Hover Zoom Scale

You can see the results below.

See the Pen css hover zoom scale by Wifeo (@wifeo) on CodePen.

Link

Jquery Zoom On Hover

Jquery Zoom On Hover

You can see the results below.

See the Pen Grid zoom by Marco Barría (@fixcl) on CodePen.

Link

Jquery Zoom On Click

Jquery Zoom On Click

You can see the results below.

See the Pen Image gallery with zoom by wunnle (@wunnle) on CodePen.

Link

Smooth Zoom Effect CSS

See the Pen Magnifying Effect by Blake Bowen (@osublake) on CodePen.

Link

Image Hover Zoom Effect HTML5 CSS3

Image Hover Zoom Effect HTML5 CSS3

You can see the results below.

See the Pen Thumbnail Animation Effects by Yogev Ahuvia (@kindofone) on CodePen.

Link

CSS Zoom Background Image On Hover

Zoom Background Image On Hover

You can see the results below.

See the Pen Image cropped and hover zoom effect by Sara B. (@sara_bianchi94) on CodePen.

Link

Bootstrap Zoom Image On Hover

Bootstrap Zoom Image On Hover

You can see the results below.

See the Pen Bootstrap Portfolio Grid Color Overlay w/Hover Zoom by Chad Westfall (@getwestfall) on CodePen.

Link

Zoom Image Animation CSS

Zoom Image Animation CSS

You can see the results below.

See the Pen Image Zoom Effect with animated transition by stefan lachmann (@2lach) on CodePen.

Link

Summary:

Through this, I hope the article will provide you with useful zoom effects for web development, web and if you have any questions just send an email I will respond as soon as possible. I hope you Please continue to support the site so that I can write more good articles. Have a nice day!