יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור

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

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

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

ברגע שתבינו את עקרון הפעולה, תוכלו להתאים אותו בקלות לצרכים ולמטרות שלכם.

תוכלו להוריד את הטמפלט המוכן או לעצב אותו בעצמכם.

*יש קובץ JSON להעלאה לאלמנטור בתוך תיקייה דחוסה, צריך לחלץ את הקובץ לפני העלאה.

שלב 1) יצירת הבסיס:

נוסיף קונטיינר עם 4 קונטיינרים פנימיים ונגדיר לקונטיינר האב גובה של 400px.

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

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

לאחר מכן ניתן לקונטיינר נכד את הקלאס: reveal

עכשיו נוסיף את האלמנטים שנרצה שיופיעו במעבר עכבר לתוך קונטיינר נכד.

שלב 2 ) הוספת אפקט הזכוכית:

כדי שבמעבר עכבר יהיה אפקט זכוכית ויטשטש את התמונה מתחתיו נוסיף את הקוד הבא לקונטיינר נכד:

.reveal{
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

שלב 3 ) הצגת התוכן במעבר עכבר:

זה החלק שאליו חיכינו, השלב שבו האפקט יעבוד לנו,
בשביל זה פשוט נצטרך להוסיף את הקוד הבא לקונטיינר הנכד:

.reveal{
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.reveal:hover{
    opacity: 1;
}

שלב 4) ביטול האפקט במובייל:

בשביל חווית משתמש נכונה למשתמשי מובייל כדאי לבטל את האפקט במובייל, כדי לבטל את האפקט במובייל השתמשו בקוד הבא במקום הקוד שהוספנו בסעיף הקודם:

@media only screen and (min-width: 1024px){
    .reveal{
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.reveal:hover{
    opacity: 1;
}
}

והנה התוצאה:

כפי שראיתם יצירת אפקטי כניסה לאלמנטים במעבר עכבר לא כל כך מסובך, ככה תוכלו לבנות ולעצב אתרים קצת שונים מהמתחרים שלכם, כאלו שיעשו וואו כשמשתמשים יכנסו אליו.

יש לכם רעיונות לאפקטים מעניינים נוספים? נתקלתם בבעיה? תכתבו לי בתגובות או בקבוצה של הקהילה.