CSS Tip – Image Hover Zoom #shorts

?Subscribe to @NetNinja
Visit for more tips & tricks!


Here's a nice little hover effect for Image thumbnails in some kind of grid Using CSS so to begin with we have a div With a class of thumbs which contains Nine different images all found in this Image folder over here in the CSS we set The div 2 display as grid and split it Into three equal columns for the images We give each one a width of 100 of its Column a white border and a box sizing Of Border box when we hover over the Images we use the transform property to Scale the whole image up by 1.4 to make It bigger and rotate it by five degrees To give it that tilt and we also give it A box Shadow to apply some depth to it So make sure that the hover transitions Smoothly we apply a transition property To the image itself for all properties Of a 0.2 seconds And that's it my friends just a simple Hover effect for images in some kind of Gallery

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *