Posted By

jntu_gnec on 05/20/12


Tagged

css zoom


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Josueriv


CSS Zoom


 / Published in: CSS
 

URL: http://www.megawrz.com/css/190596-css-zoom.html

font-size: If you are using a character, then it is possible to zoom in and out by changing the font-size property on hover and combining it with the transition property for a smooth animation. transform: Another method is by using a scale transform in which you just have to specify how much you want the image to be zoomed in like 2x, 3x etc. It can be used for zoom out too by passing the values less than one. width and height: This is the most common and old techniqiue in which we change the dimensions of the element directly via css on hover or click with transitions. Take a look at the code to learn more about these techniques. If you know about more texhniques to create a zoom effect using CSS3, feel free to share it.

  1. HTML :
  2.  
  3. <div>
  4. <p id="one">&#9787;</p>
  5. <p id="two">&#9787;</p>
  6. <p id="three">&#9786;</p>
  7. </div>
  8.  
  9.  
  10. CSS :
  11.  
  12. * {
  13. /*transition*/
  14. -webkit-transition: all 0.2s ease;
  15. -moz-transition: all 0.2s ease;
  16. -o-transition: all 0.2s ease;
  17. transition: all 0.2s ease;
  18. }
  19.  
  20. body {
  21. overflow: hidden;
  22. font-size: 50px;
  23. font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  24. font-weight: 300;
  25. background: #dedede;
  26. background: -webkit-radial-gradient(center, circle farthest-corner, rgba(255,255,255,0) 50%, rgba(200,200,200,1)), -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  27. background: -moz-radial-gradient(center, circle farthest-corner, rgba(255,255,255,0) 50%, rgba(200,200,200,1)), -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  28. background: -ms-radial-gradient(center, circle farthest-corner, rgba(255,255,255,0) 50%, rgba(200,200,200,1)), -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  29. background: -o-radial-gradient(center, circle farthest-corner, rgba(255,255,255,0) 50%, rgba(200,200,200,1)), -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  30. background: radial-gradient(center, circle farthest-corner, rgba(255,255,255,0) 50%, rgba(200,200,200,1)), -webkit-radial-gradient(center, circle, rgba(255,255,255,.35), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 21%), -webkit-radial-gradient(center, circle, rgba(0,0,0,.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 21%), -webkit-radial-gradient(center, circle farthest-corner, #f0f0f0, #c0c0c0);
  31. background-size: 100% 100%, 10px 10px, 10px 10px, 100% 100%;
  32. }
  33.  
  34. div {
  35. width: 300px;
  36. margin: 20px auto;
  37. position: relative;
  38. }
  39.  
  40. p {
  41. border-radius:5px;
  42. padding: 10px;
  43. margin: 0;
  44. display: block;
  45. position: absolute;
  46. text-align: center;
  47. }
  48.  
  49. #one {
  50. font-size: 50px;
  51. top: 0;
  52. left: 0;
  53. }
  54.  
  55. #one:hover { font-size: 100px }
  56.  
  57. #two {
  58. /*transform*/
  59. -webkit-transform: scale(1);
  60. -moz-transform: scale(1);
  61. -ms-transform: scale(1);
  62. -o-transform: scale(1);
  63. transform: scale(1);
  64.  
  65. top: 0;
  66. left: 100px;
  67. }
  68.  
  69. #two:hover {
  70. /*transform*/
  71. -webkit-transform: scale(2);
  72. -moz-transform: scale(2);
  73. -ms-transform: scale(2);
  74. -o-transform: scale(2);
  75. transform: scale(2);
  76. }
  77.  
  78. #three {
  79. width: 50px;
  80. height: 50px;
  81. background: #000;
  82. color: #fff;
  83. text-align: center;
  84. left: 200px;
  85. top: 0;
  86. }
  87.  
  88. #three:hover {
  89. width: 100px;
  90. height: 100px;
  91. }

Report this snippet  

You need to login to post a comment.