HEY

HEY EVERYONE, WELCOME BACK. YOU CAN CREATE A MODERN IMAGE GALLERY WITH THIS HOVER EFFECT USING JUST HTML AND CSS. THE VIDEO IS ONLY TWO MINUTES LONG, SO PLEASE WATCH UNTIL THE END WITHOUT SKIPPING. THIS WILL HELP BEGINNERS UNDERSTAND HOW HOVER EFFECTS WORK AND LEARN MANY NEW THINGS. SO, WITHOUT FURTHER DELAY, LET'S GET STARTED. FIRST, I'LL TAKE A DIV NAMED CONTAINER. INSIDE THAT, I'LL TAKE ANOTHER DIV NAMED CARD, AND THEN I'LL ADD AN IMAGE TAG INSIDE IT. AFTER THAT, I'LL SELECT THE CARD DIV AND PASTE IT MULTIPLE TIMES. ALSO, I'LL CHANGE THE IMAGES. NEXT, I'LL APPLY SOME BASIC STYLES IN CSS. WHEN WE OPEN THE LIVE SERVER, WE'LL SEE SOMETHING BORING LIKE THIS. NOW, I'LL SET THE CONTAINER DIV'S WIDTH TO 800 PIXELS AND THE BACKGROUND COLOR TO RED. AFTER THAT, FOR THE CARD DIV, I'LL SET OVERFLOW TO HIDDEN, HEIGHT TO 300 PIXELS, AND WIDTH TO 250 PIXELS. THEN, FOR THE IMAGE INSIDE THE CARD DIV, I'LL SET WIDTH TO 100%, HEIGHT TO 100%, AND OBJECT-FIT TO COVER. THAT THIS WILL LOOK LIKE THIS. I'LL SET THE CARD DIV'S BORDER RADIUS TO 10 PIXELS, CURSOR TO POINTER, AND TRANSITION TO 400MS. NEXT, WE NEED TO BRING THE CHILD ELEMENTS INSIDE THE CONTAINER TO THE CENTER AND IN A ROW DIRECTION. TO DO THAT, I'LL SET THE CONTAINER TO DISPLAY FLEX, JUSTIFY CONTENT CENTER, AND ALIGN ITEMS CENTER. THEN IT WILL LOOK LIKE THIS. I'LL SET FLEX WRAP TO WRAP, AND THE GAP TO 15 PIXELS. SINCE WE DON'T NEED THE CONTAINER'S BACKGROUND COLOR ANYMORE, I'LL REMOVE IT. NOW, WE NEED TO ADD A HOVER EFFECT TO THE CARD DIV. SO, WHEN IT'S HOVERED, THE SCALE WILL INCREASE FROM THE DEFAULT 1 TO 1.1. TO DO THIS, I'LL SET THE TRANSFORM SCALE TO 1.1, 1.1. THIS WILL SCALE IT ON BOTH THE X AND Y AXIS. THE SCALE IS WORKING PERFECTLY, BUT THE OTHER CARDS AREN'T SHRINKING OR BLURRING YET. TO DO THAT, I'LL WRITE .CONTAINER:HOVER .CARD:NOT(:HOVER) AND INSIDE THE CURLY BRACES, I'LL SET TRANSFORM SCALE TO 0.9, 0.9 AND FILTER BLUR TO 10 PIXELS. THIS MEANS WHEN THE CONTAINER DIV IS HOVERED, ANY CARD THAT IS NOT BEING HOVERED WILL SCALE DOWN AND BLUR. NOW, LET'S CHECK AND THE HOVER EFFECTS ARE WORKING BEAUTIFULLY. THANKS FOR WATCHING. FOLLOW FOR MORE CODING HACKS.