Zoom background image css

/*
Or this one can be used
*/
.prod_img {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  height: 580px;
  width: 300px;
  position: relative;
}

.prod_img:before {
  content: ' ';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg);
  background-size: cover;
  background-position: center center;
  "

}

.protransparentbg {
  position: absolute;
  left: 20px;
  background: rgba(51, 51, 51, .8);
}

.prod_img:hover:before {
  webkit-transform: scale(1.04);
  -moz-transform: scale(1.04);
  -o-transform: scale(1.04);
  -ms-transform: scale(1.04);
  transform: scale(1.04);
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

Source: stackoverflow.com

Similar codes

0 vote356 views1 answer
Css text elipsis after width
CSS
2 votes394 views1 answer
Css center in td
CSS
17 votes354 views4 answers
Get featured image post wordpress by post id
CSS
42 votes347 views4 answers
Css center div in page
CSS
9 votes352 views3 answers
Css bottom
CSS
72 votes344 views6 answers
Css absolute center horizontal
CSS
0 vote360 views1 answer
Html css on class
CSS
0 vote343 views1 answer
&:disabled not working sass
CSS
0 vote330 views2 answers
Error: the sandbox is not in sync with the podfile.lock. run
CSS
3 votes338 views2 answers
DevTools failed to load SourceMap: Could not load content for bootstrap.min.css.map
CSS