zoom background image css

1/*Rather than an <img>, I used an additional <div> inside the parent to act as the image. The structure being:*/
2
3<div class="parent">
4  <div class="child"></div>
5</div>
6/*First we specify the dimensions for the parent element. Then the child can fill the parent using width: 100% and height: 100%;, as well as set the background image, ensuring it scales to cover the area.*/
7
8.parent {
9  width: 400px; 
10  height: 300px;
11}
12
13.child {
14  width: 100%;
15  height: 100%;
16  background-color: black; /* fallback color */
17  background-image: url("images/city.jpg");
18  background-position: center;
19  background-size: cover;
20}
21/*We then add hover effects to our parent element which will affect our child element. A focus style is good for accessibility as well:*/
22
23.parent:hover .child,
24.parent:focus .child {
25  transform: scale(1.2);
26}
27/*You may want to use a tool for adding prefixes for the best possible browser support.
28
29To finish up the basic effect, we can add some transitions to our child element’s normal state:
30*/
31transition: all .5s;
32/*If you want to add a color overlay, you can make use of pseudo elements like ::before:
33*/
34.child::before {
35  content: "";
36  display: none;
37  height: 100%;
38  width: 100%;
39  position: absolute;
40  top: 0;
41  left: 0;
42  background-color: rgba(52, 73, 94, 0.75);
43}
44
45.parent:hover .child:before,
46.parent:focus .child:before {
47  display: block;
48}
49/*Now when we hover on the parent element, the child element should show a color overlay!
50
51Finally, we’ll cover how to add some text to show on our overlay. We can add an element to our current child element like so:
52*/
53<div class="parent">
54   <div class="child">
55      <span>Hello</span>
56   </div>
57</div>
58We can give our <span> some style:
59
60span {
61  color: white; /* Good thing we set a fallback color! */
62  font-family: sans-serif;
63  padding: 25%;
64  position: absolute;
65}
66/*and we can make it visible only when we hover on the .parent:
67*/
68.parent:hover span,
69.parent:focus span {
70  display: block;
71}
72/*For more in depth go to source*/

1/*
2Or this one can be used
3*/
4.prod_img {
5  -webkit-transition: all 2s ease-in-out;
6  -moz-transition: all 2s ease-in-out;
7  -o-transition: all 2s ease-in-out;
8  -ms-transition: all 2s ease-in-out;
9  transition: all 2s ease-in-out;
10  height: 580px;
11  width: 300px;
12  position: relative;
13}
14
15.prod_img:before {
16  content: ' ';
17  position: absolute;
18  top: 0px;
19  left: 0px;
20  width: 100%;
21  height: 100%;
22  background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg);
23  background-size: cover;
24  background-position: center center;
25  "
26
27}
28
29.protransparentbg {
30  position: absolute;
31  left: 20px;
32  background: rgba(51, 51, 51, .8);
33}
34
35.prod_img:hover:before {
36  webkit-transform: scale(1.04);
37  -moz-transform: scale(1.04);
38  -o-transform: scale(1.04);
39  -ms-transform: scale(1.04);
40  transform: scale(1.04);
41  -webkit-transition: all 2s ease-in-out;
42  -moz-transition: all 2s ease-in-out;
43  -o-transition: all 2s ease-in-out;
44  -ms-transition: all 2s ease-in-out;
45  transition: all 2s ease-in-out;
46}