אפקט תמונה גודלת במעבר עכבר בקלות עם CSS

היום, מיני מדריך קטנטן שעוסק באפקט ספציפי אשר נוצר בעזרת CSS. מדריך זה נולד כתגובה לשאלה במדור שאלות ותשובות, כאן אצלנו באתר. שימו לב כי מדובר על אפקט זום ולא אפקט הגדלה של אותה תמונה כלומר לא מדובר על LightBox (הגדלה של תמונה קטנה לתמונה בגודל מלא) אלא על אפקט מאוד בסיסי אשר יוצר אינטראקציה בין פעולות הגולש לתגובה כלשהי ובמקרה זה זום מצומצם של התמונה.

זה בנוי כך:

  • הסבר קצר
  • קוד Css
  • דוגמה חיה

אם בכל זאת נשארתם עם שאלה, אל תתביישו – טופס התגובות נמצא במורד הדף ונשמח לעזור ולספק לכם דוגמאות נוספות או הבהרות.

  • אהבתם? שתפו!

שתי אפשרויות זום – גולש מהתא או מוסתר בשוליים

אז מה קורה כאן? לפנינו שתי דוגמאות – הראשונה היא דוגמה בה המיכל העוטף קיבל הוראה שלא להציג שום דבר אשר חורג מהגבולות שלו בעזרת overflow:hidden – הוראה זאת לא ניתנה למיכל השני ולכן התמונה חורגת מהגבול החיצוני.

זום פנימי

זום שדורס את הגבול

דוגמאות עם קוד

זום בסיסי

תמונה לדוגמה
קוד HTML +
			<div class="ofhidden imgZoom1">
				<img src="http://lorempixel.com/360/240" alt="" />
			</div>
			
קוד CSS +
			.ofhidden {overflow: hidden;}
			
			.imgZoom1:hover img {
				-webkit-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-ms-transform: scale(1.05);
				-o-transform: scale(1.05);
				transform: scale(1.05);
				-webkit-transition-duration: 0.3s; 
				transition-duration: 0.3s;
			}
			

זום שלילי

תמונה לדוגמה
קוד HTML +
			<div class="ofhidden imgZoom2">
				<img src="http://lorempixel.com/360/240" alt="" />
			</div>
			
קוד CSS +
			.ofhidden {overflow: hidden;}
			
			.imgZoom2:hover img {
				-webkit-transform: scale(0.85);
				-moz-transform: scale(0.85);
				-ms-transform: scale(0.85);
				-o-transform: scale(0.85);
				transform: scale(0.85);
				-webkit-transition-duration: 0.3s; 
				transition-duration: 0.3s;
			}
			

דוגמה של זום גדול

תמונה לדוגמה
קוד HTML +
			<div class="imgZoom3">
				<img src="http://lorempixel.com/360/240" alt="" />
			</div>
			
קוד CSS +
			.imgZoom3:hover img {
				-webkit-transform: scale(2);
				-moz-transform: scale(2);
				-ms-transform: scale(2);
				-o-transform: scale(2);
				transform: scale(2);
				-webkit-transition-duration: 0.3s; 
				transition-duration: 0.3s;
			}
			

זה הכל – פשוט וקל ובלי תוספי jQuery

אני מזכיר כי מיני-מדריך זה פורסם כתגובה לשאלה בנושא זה. זה אינו פתרון אשר נועד להחליף תוספים להגדלת התמונה בקליק אלא ליצור אפקט במעבר עכבר מעל מיכל (div) מסוים או מעל התמונה עצמה וכך ליצור אתר אשר מגיב לפעולות הגולש.

המון בהצלחה, שגיב SEO.

  • אהבתם? שתפו!