CodeIn House

  • Laravel
  • WordPress
  • jQuery
  • Javascript
  • Contact
Home   CSS3   Image Hover Effects Tutorial – Using CSS to Zoom Backg ...

Image Hover Effects Tutorial – Using CSS to Zoom Background Image on Hover

September 1, 2018 by SNK

using css to zoom background iimage on hover

In this CSS image hover effects tutorial we are going too see how can we use CSS to zoom background image on hover and learn how to make an image zoom in HTML and CSS3.

This type of effects are mostly shown in the image based websites as well as travel and tourism websites where they use a lot of images of the places and landscapes.

We are going to implement this functionality without using the JavaScript or jQuery. We are going to use it using pure CSS3 which has made us easy for us to achieve many things that used to obtain with the JavaScript only in the past.

CSS3 has many extra properties some of them are translate, scale, rotate and skew which helps to transform an object inside the DOM without changing it and load more without any scripts

lets get started,

What are we going to do ?

  1. Create HTML markup to add an image.
  2. Give some CSS for an stylish look.
  3. Finally add the :hover code in CSS to zoom an image on hover.

 

Step 1 : Creating an HTML Markup to Add an Image

We always use bootstrap to make our things more easier while creating the elegant design quickly. But its not needed in this tutorial, we are using bootstrap only for layouts.

HTML Markup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="row">
<div class="col-md-4">
<div class="zoom-out-effect">
<div class="img-box">
<img src="img1.jpg" alt="" height="200" width="300" alt="image" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="zoom-out-effect">
<div class="img-box">
<img src="img2.jpg" alt="" height="200" width="300" alt="image" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="zoom-out-effect">
<div class="img-box">
<img src="img3.jpg" alt="" height="200" width="300" alt="image" />
</div>
</div>
</div>
</div>

Here the <div> class row, col-md-* are the classes that inside bootstrap. It is to know that you don’t get confused how the alignment is so proper. It is the ability of bootstrap that layout is divided into grids. Learn more about bootstrap in bootstrap’s official website.

 

Step 2 : Give some stylish look to the Added Image Using CSS

Let’s write some CSS3 codes to align them properly in the layout.

"CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.img-box {
display: block;
width: 100%;
height: 100%;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden
}
 
.img-box img {
display: block;
position: relative;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
width: 100%;
}
 
.zoom-out-effect {
display: block;
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border-radius: 5px 5px 0px 0px;
}
.zoom-out-effect .img-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6;
z-index: 0;
}

Step 3 : Adding :hover to CSS to Make the Image Zoom on Hover

Image Hover Over Zoom CSS Property
CSS
1
2
3
4
5
6
7
.zoom-out-effect:hover .img-box {
-webkit-transform: translateZ(0) scale(1.15, 1.15);
-moz-transform: translateZ(0) scale(1.15, 1.15);
-ms-transform: translateZ(0) scale(1.15, 1.15);
-o-transform: translateZ(0) scale(1.15, 1.15);
transform: translateZ(0) scale(1.15, 1.15)
}

 

Get a clean Demo from below,

Demo

How are we achieving it ?

CSS3 has ability to skew, scale and stretch the image which we used to use JavaScript or jQuery in order to obtain the result in the past.

Using CSS3 is much more flexible and faster and dont have to reach out to the DOM in order to change the result. So browser interaction is more quick rather than using JavaScript.

We have the <div> named zoom-out-effect which has one <div> element and one <img src> element. We have applied zoom effect on <div> zoom-out-effect on :hover and made the overflow hidden so that the image doesn’t come out of the <div>

Finally the full code :

Full HTML and CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="ROBOTS" content="NOFOLLOW, NOINDEX">
<title>Image Zoom on Hover Tutorial</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
 
<style>
.container {
margin-top: 50px;
}
 
.img-box {
display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden
}
 
.img-box img {
    display: block;
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    width: 100%;
}
 
.zoom-out-effect {
    display: block;
    overflow: hidden;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-radius: 5px 5px 0px 0px;
}
.zoom-out-effect .img-box {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #e6e6e6;
    z-index: 0;
}
 
.zoom-out-effect:hover .img-box {
    -webkit-transform: translateZ(0) scale(1.15, 1.15);
    -moz-transform: translateZ(0) scale(1.15, 1.15);
    -ms-transform: translateZ(0) scale(1.15, 1.15);
    -o-transform: translateZ(0) scale(1.15, 1.15);
    transform: translateZ(0) scale(1.15, 1.15)
}
 
</style>
</head>
<body>
<div class="container">
<h1 class="text-center h3">Image Zoom Effect Tutorial</h1>
<div class="row">
<div class="col-md-4">
<div class="zoom-out-effect">
<div class="img-box">
<img src="img1.jpg" alt="" height="200" width="300" alt="image" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="zoom-out-effect">
<div class="img-box">
<img src="img2.jpg" alt="" height="200" width="300" alt="image" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="zoom-out-effect">
<div class="img-box">
<img src="img3.jpg" alt="" height="200" width="300" alt="image" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

If you have any problem, feel free to mention them via comments.

SHARE ON
Buffer

Enjoyed this article?

Like us on

CSS3 HTML5 cool image hover effects css css image hover effects css zoom background image on hover css zoom image magnifier how to make an image zoom in html image hover zoom effect in css image zoom on hover html image zoom on hover jquery

Avatar for SNK

About SNK

Hello Welcome to my Blog. I develop Websites Using Laravel Framwork & WordPress. Get Latest updates on Facebook | Twitter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Connected !! With Us

TOP POSTS

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

TUTORIALS TILL DATE

  • September 2022 (6)
  • June 2021 (7)
  • October 2020 (5)
  • September 2020 (6)
  • September 2018 (14)
  • August 2018 (3)
  • July 2018 (4)
  • March 2018 (8)
  • February 2018 (5)
  • January 2018 (1)
  • December 2017 (2)
  • August 2017 (8)
  • May 2017 (1)
  • April 2017 (1)
  • March 2017 (4)
  • February 2017 (3)
  • January 2017 (4)

CATEGORIES

  • Angular (2)
  • CSS3 (3)
  • D3 (3)
  • HTML5 (7)
  • JAVA (11)
  • Javascript (20)
  • jQuery (8)
  • Laravel (35)
  • Others (3)
  • PHP (11)
  • Spring (2)
  • WordPress (10)

Top Categories

  • Angular
  • CSS3
  • D3
  • HTML5
  • JAVA
  • Javascript
  • jQuery
  • Laravel
  • Others
  • PHP
  • Spring
  • WordPress

Get in Touch

DMCA.com Protection Status

Recent Articles

  • How to Setup Spring MVC Project From Scratch in Intellij IDEA ?
  • Spring Configuration Class in JAVA [Class VS XML Config]
  • Annotations Based Configuration in Spring Framework
  • How to Configure Spring Framework with XML Configurations?
  • How to Remove Project Name from URL in JSP Project in Intellij IDEA ?

© 2012-22 CodeIn House.  •  All Rights Reserved.