Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change Image on Hover in CSS</title> <style> .card { width: 130px; height: 195px; position: relative; display: inline-block; margin: 50px; } .card .img-top { display: none; position: absolute; top: 0; left: 0; z-index: 99; } .card:hover .img-top { display: inline; } </style> </head> <body> <div class="card"> <img src="/examples/images/card-back.jpg" alt="Card Back"> <img src="/examples/images/card-front.jpg" class="img-top" alt="Card Front"> </div> </body> </html>
