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 ?
- Create HTML markup to add an image.
- Give some CSS for an stylish look.
- Finally add the
:hovercode 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.
|
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.
|
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
|
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,
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 :
|
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.
Leave a Reply