Creating a Zoom Effect on an image on hover using CSS

Question

I m currently trying to create a zoom effect on hover over one of my four images  The problem is most examples usually use tables or mask divs to apply some sort of effect    Here s one example that implements what I would like this    This is my code so far    HTML   lt div id  menu  gt   lt img class   blog  src  http   s18 postimg org il7hbk7i1 image png  alt    gt   lt img class   music  src  http   s18 postimg org 4st2fxgqh image png  alt    gt   lt img class   projects  src  http   s18 postimg org sxtrxn115 image png  alt    gt   lt img class   bio  src  http   s18 postimg org 5xn4lb37d image png  alt    gt   lt  div gt    CSS   menu       max-width  1200px      text-align  center      margin  auto      menu img       width  250px      height  375px      padding  0px 5px 0px 5px      overflow  hidden      blog       height  375px      -webkit-transition  all 1s ease      -moz-transition  all 1s ease      -o-transition  all 1s ease      -ms-transition  all 1s ease      transition  all 1s ease      blog hover       cursor  pointer      height 475px      width  350px      music       height  375px      projects       height  375px      bio       height  375px

User · Answer

I like using a background image   I find it easier and more flexible   DEMO  CSS    menu       max-width  1200px      text-align  center      margin  auto     zoomimg       display  inline-block      width  250px      height  375px      padding  0px 5px 0px 5px      background-size  100  100       background-repeat  no-repeat      background-position  center center      transition  all  5s ease     zoomimg hover       cursor  pointer      background-size  150  150      blog       background-image  url http   s18 postimg org il7hbk7i1 image png      music       background-image  url http   s18 postimg org 4st2fxgqh image png      projects       background-image  url http   s18 postimg org sxtrxn115 image png      bio       background-image  url http   s18 postimg org 5xn4lb37d image png       HTML    lt div id  menu  gt       lt div class  blog zoomimg  gt  lt  div gt       lt div class  music zoomimg  gt  lt  div gt       lt div class  projects zoomimg  gt  lt  div gt       lt div class  bio zoomimg  gt  lt  div gt   lt  div gt    DEMO 2 with Overlay

User · Answer

x000D   x000D       img-wrap hover img   x000D          transform  scale 0 8   x000D        x000D       img-wrap img   x000D          display  block  x000D          transition  all 0 3s ease 0s  x000D          width  100   x000D        x000D       lt div class  img-wrap  gt  x000D       lt img src  http   www sampleimages images jpg   gt     Your image x000D       lt  div gt  x000D   x000D   x000D    This code is only for zoom-out effect Set the div  img-wrap  according to your styles and insert the above style results zoom-out effect For zoom-in effect you must increase the scale value eg  for zoom-in use   transform  scale 1 3

User · Answer

Simply    grow   transition  all  2s ease-in-out      This will allow the element to assign an animation via css    grow hover   transform  scale 1 1       This will make it grow

User · Answer

Here you go   Demo  http   jsfiddle net 27Syr 4   HTML   lt div id  menu  gt        lt div class  fader  gt           lt div class  text  gt               lt p gt Yay  lt  p gt           lt  div gt           lt a href  http   stackoverflow com questions 15732643 jquery-masonry-and-css3   gt               lt img class   blog  src  http   s18 postimg org il7hbk7i1 image png  alt    gt           lt  a gt       lt  div gt        lt div class  fader  gt           lt div class  text  gt               lt p gt Yay  lt  p gt           lt  div gt           lt a href  http   stackoverflow com questions 15732643 jquery-masonry-and-css3   gt               lt img class   blog  src  http   s18 postimg org 4st2fxgqh image png  alt    gt           lt  a gt       lt  div gt        lt div class  fader  gt           lt div class  text  gt               lt p gt Yay  lt  p gt           lt  div gt           lt a href  http   stackoverflow com questions 15732643 jquery-masonry-and-css3   gt               lt img class   projects  src  http   s18 postimg org sxtrxn115 image png  alt    gt           lt  a gt       lt  div gt        lt div class  fader  gt           lt div class  text  gt               lt p gt Yay  lt  p gt           lt  div gt           lt a href  http   stackoverflow com questions 15732643 jquery-masonry-and-css3   gt               lt img class   blog  src  http   s18 postimg org 5xn4lb37d image png  alt    gt           lt  a gt       lt  div gt    lt  div gt    CSS   menu       text-align  center       fader          Giving equal sizes to each element        width     250px      height    375px          Positioning elements in lines        display   inline-block          This is necessary for position absolute to work as desired        position  relative          Preventing zoomed images to grow outside their elements        overflow  hidden           fader img              Stretching the images to fill whole elements            width        100           height       100               Preventing blank space below the image            line-height  0              A one-second transition was to disturbing for me            -webkit-transition  all 0 3s ease          -moz-transition     all 0 3s ease          -o-transition       all 0 3s ease          -ms-transition      all 0 3s ease          transition          all 0 3s ease              fader img hover                  Making images appear bigger and transparent on mouseover                opacity  0 5              width    120               height   120           fader  text              Placing text behind images            z-index  -10                   Positioning text top-left conrner in the middle of elements            position  absolute          top       50           left      50               fader  text p                  Positioning text contents 50  left and top relative                to text container s top left corner                margin-top   -50                margin-left  -50       Suggestion  Instead of  fader   inline-block    consider using some grid system  Based on your technology of preference  you can go Foundation  Susy  Masonry or their alternatives

User · Answer

-webkit-transition  all 1s ease     Safari and Chrome    -moz-transition  all 1s ease     Firefox    -ms-transition  all 1s ease     IE 9    -o-transition  all 1s ease     Opera    transition  all 1s ease      just want to make a note on the above transitions only need   -webkit-transition  all 1s ease     Safari and Chrome    transition  all 1s ease    and -ms- certainly doenst work for IE 9 i dont know where you got that idea from

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt   zoom      overflow  hidden      zoom img     transition  transform  5s ease     zoom hover img     transform  scale 1 5       lt  style gt   lt  head gt   lt body gt    lt h1 gt Image Zoom On Hover lt  h1 gt   lt div class  zoom  gt     lt img src   image-path-url  alt    gt   lt  div gt    lt  body gt   lt  html gt

User · Answer

x000D   x000D   import url  https   fonts googleapis com css family Muli 200 300 400 700 amp subset latin-ext    x000D   body  font-family   Muli   sans-serif  color white   x000D    lists   x000D     width  350px  x000D     height  460px  x000D     overflow  hidden  x000D     background-color  222222  x000D     padding 0px  x000D     float left  x000D      margin  10px  x000D     x000D    x000D    listimg   x000D     width  100   x000D     height  220px  x000D     overflow  hidden  x000D     float  left  x000D     x000D     x000D     lists  listimg img   x000D     width  350px  x000D     height  220px  x000D     -moz-transition  all 0 3s  x000D     -webkit-transition  all 0 3s  x000D     transition  all 0 3s  x000D     x000D    lists hover cursor  pointer   x000D    lists hover  gt   listimg img   x000D     -moz-transform  scale 1 3   x000D     -webkit-transform  scale 1 3   x000D     transform  scale 1 3   x000D     -webkit-filter  blur 5px   x000D     filter  blur 5px   x000D     x000D   x000D   lists h1 margin 20px  display inline-block  margin-bottom 0px    x000D   lists p margin 20px   x000D   x000D   listdetail  text-align right  font-weight 200  padding-top 6px padding-bottom 6px   x000D   lt div id  lists  gt  x000D   lt div class  listimg  gt  x000D     lt img src  https   lh3 googleusercontent com WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj yK5thdtXNDKoZcUOHlegFhx7 w1920-h914-rw  gt  x000D   lt  div gt  x000D   lt div class  listtext  gt  x000D   lt h1 gt Eyes Lorem Impsum Samet lt  h1 gt  x000D   lt p gt Impsum Samet Lorem lt  p gt  x000D   lt  div gt  x000D   lt div class  listdetail  gt  x000D   lt p gt Click for More Details    lt  p gt  x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   lt div id  lists  gt  x000D   lt div class  listimg  gt  x000D     lt img src  https   lh4 googleusercontent com fqK7aQ7auobK NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym 3988798NlkGDzu0MWnR-7nxIhj7g w1920-h870-rw  gt  x000D   lt  div gt  x000D   lt div class  listtext  gt  x000D   lt h1 gt Two Frogs Lorem Impsum Samet lt  h1 gt  x000D   lt p gt Impsum Samet Lorem lt  p gt  x000D   lt  div gt  x000D   lt div class  listdetail  gt  x000D   lt p gt More Details    lt  p gt  x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

aku        transition  all  2s ease-in-out       aku hover       transform  scale 1 1

User · Answer

lt div class  item  gt     lt img src  yamahdi1 jpg  alt  pepsi  width  50  height  58  gt     lt img src  yamahdi jpg  alt  pepsi  width  50  height  58  gt     lt div class  item-overlay top  gt  lt  div gt         css     item img      -moz-transition  all 0 3s    -webkit-transition  all 0 3s    transition  all 0 3s     item img hover     -moz-transform  scale 1 1     -webkit-transform  scale 1 1     transform  scale 1 1

User · Answer

Add jQuery JavaScript library together with the jquery zbox css and jquery zbox js to your webpage    lt link rel  stylesheet  href  jquery zbox css  gt   lt script src  jquery min js  gt  lt  script gt   lt script src  jquery zbox min js  gt  lt  script gt    Add a group of thumbnails with links pointing to the full sized images into the webpage    lt a class  zb  rel  group  href  1 png  title  Image 1  gt     lt img src  thumb1 png  gt   lt  a gt   lt a class  zb  rel  group  href  2 png  title  Image 2  gt     lt img src  thumb2 png  gt   lt  a gt   lt a class  zb  rel  group  href  3 png  title  Image 3  gt    lt img src  thumb3 png  gt   lt  a gt    Call the function on document ready  That s it   In the view source do       zb   zbox

User · Answer

SOLUTION 1  You can download zoom-master    SOLUTION 2   Go to here    SOLUTION 3   Your own codes   x000D   x000D   hover-zoom   x000D      -moz-transition all 0 3s  x000D      -webkit-transition all 0 3s  x000D       transition all 0 3s x000D     x000D   hover-zoom hover   x000D      -moz-transform  scale 1 1   x000D      -webkit-transform  scale 1 1   x000D       transform  scale 1 5  x000D     x000D   lt img class  hover-zoom   src  https   i stack imgur com ewRqh jpg   x000D       width  100px   gt  x000D   x000D   x000D

User · Answer

What about using CSS3 transform property and use scale which ill give a zoom like effect  this can be done like so   HTML   lt div class  thumbnail  gt       lt div class  image  gt           lt img  src  http   placehold it 320x240  alt  Some awesome text   gt       lt  div gt   lt  div gt    CSS   thumbnail       width  320px      height  240px      image       width  100       height  100           image img       -webkit-transition  all 1s ease     Safari and Chrome        -moz-transition  all 1s ease     Firefox        -ms-transition  all 1s ease     IE 9        -o-transition  all 1s ease     Opera        transition  all 1s ease      image hover img       -webkit-transform scale 1 25      Safari and Chrome        -moz-transform scale 1 25      Firefox        -ms-transform scale 1 25      IE 9        -o-transform scale 1 25      Opera         transform scale 1 25       Here s a demo fiddle  I removed some of the element to make it simpler  you can always add overflow hidden to the  image to hide the overflow of the scaled image   zoom property only works in IE

User · Answer

item hover img     -moz-transform  scale 1 3    -webkit-transform  scale 1 3    transform  scale 1 3       this way you can zoom any image with simple animation  If you need a complete tutorial here is a official tutorial  http   talkerscode com webtricks image-zoom-in-on-hover-using-css3 php

[html] Creating a Zoom Effect on an image on hover using CSS?

DEMO

DEMO 2 with Overlay

Examples related to html

Examples related to class

Examples related to css