Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS3 Image Transform Gallery</title> <style> ul { padding: 0; margin: 50px 20px; list-style: none; } ul li { margin: 5px; display: inline-block; } ul li a { padding: 5px; display: inline-block; border: 1px solid #f2f2f2; } ul li a img { width: 125px; height: 125px; display: block; } ul li a:hover img { transform: scale(1.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } </style> </head> <body> <ul> <li><a href="#"><img src="/examples/images/club.jpg" alt="Club Card"></a></li> <li><a href="#"><img src="/examples/images/diamond.jpg" alt="Diamond Card"></a></li> <li><a href="#"><img src="/examples/images/spade.jpg" alt="Spade Card"></a></li> <li><a href="#"><img src="/examples/images/heart.jpg" alt="Heart Card"></a></li> </ul> </body> </html>
