השלבים להכנת אפקט CSS לשינוי תמונת רקע לקונטיינר במעבר על כפתור
- פתחי את העמוד הרצוי באלמנטור > הוסיפי קונטיינר ראשי > פריסה > כיוון > מימין לשמאל
- בתוך הקונטיינר הוסיפי 3 כפתורים ואחריהם קונטיינר פנימי
- הגדירי לקונטיינר החיצוני ולקונטיינר הפנימי גובה זהה (בסרטון הגובה של שניהם הוא 100vh)
- בחרי את הקונטיינר הפנימי > סגנון > רקע > בחרי תמונת רקע
- המשיכי עם הקונטיינר הפנימי > מתקדם > מיקום > מוחלט > ובCSS Classes > כתבי bg
- הוסיפי את הקוד הבא לכל כפתור שבתוך הקונטיינר הראשי
הקוד לאפקט CSS לשינוי תמונת רקע לקונטיינר במעבר על כפתור באלמנטור
selector:hover ~ .bg{
background-image: url('https://chagit.alufot.co.il/wp-content/uploads/bg1.svg') !important;
}
שימי לב להחליף את תמונת הרקע לכל כפתור.
4 תגובות
תודה על ההדרכה
משוםמה זה עובד לי טוב רק אם אני עושה 100VH
ואם אני עושה 50 את שני הקונטיינרים יש בעיה שהתמונות מכסות רק חלק מהקונטיינר
תודה מראש
זה בגלל החיתוך המקורי של התמונה.
צריך לבחור את הקונטיינר הפנימי > סגנון > רקע > גודל תצוגה > הכלה
וככה התמונה ממלאת באופן אוטומטי את כל הקונטיינר.
זה לא עזר
קורה משהו מוזר שאפי’ ששני הקונטיינרים באותו גובה של VH
בפועל הקונטיינר המוחלט נהיה קטן יותר מהקונטיינר הרגיל
לבדוק שאין שוליים פנימיים לקונטיינר העוטף