تأثير تكبير الصورة عند تمرير الماوس ب CSS
تأثير الزوم على الصورة ب CSS مرر الماوس على الصورة لتشاهد التأثير لإنشاء هذا التأثير على الصورة يمكنك استخدام هذا الكود التالي:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /** * ZOOM IMAGE EFFECT ON HOVER // wpRock.fr */ .wprock-img-zoom-hover .wprock-img-zoom { overflow: hidden; position: relative; } .wprock-img-zoom-hover .wprock-img-zoom img { max-width: 100%; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; } .wprock-img-zoom-hover .wprock-img-zoom * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } .wprock-img-zoom-hover:hover .wprock-img-zoom img { -moz-transform: scale(1.06); -webkit-transform: scale(1.06); transform: scale(1.06); } </style> </head> <body> <div class="wprock-img-zoom-hover" style="width: 100%; max-width: 520px; margin: 100px auto; border: 2px solid lightseagreen;"> <div class="wprock-img-zoom"> <img src="https://wprock.fr/wp-content/uploads/2018/08/twitter-cover-wprock-520x254.png" alt="wpRock CSS - Zomm effect on image hover"> </div> <p>If the image or if this part of the text is flown over with the mouse, then the zoom effect will be triggered ;)</p> </div> </body> </html> |
للأمانة الكود منقول من هنا: CSS : Effet de zoom au survol d’une image
