מעבר בקרוספייד בין שתי תמונות

פורום התמיכה פתוח למשתמשים מנויים בלבד. יש להתחבר או להרשם כדי להוסיף דיון או תגובה בפורום.

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

ראשי פורומים תמיכה מעבר בקרוספייד בין שתי תמונות

דיון זה מוגדר: סגור

תגיות: , , ,

מוצגות 7 תגובות – 1 עד 7 (מתוך 7 סה״כ)
  • מאת
    תגובות
  • #62257

    yoavkumma
    משתתף

    הי.
    אני מנסה לעשות קרוספייד בין שתי תמונות באלמנטור.
    הוספתי אלמנט HTML עם הקוד הבא:

    <a href="link">
    <div id="cf">
    <img class="bottom" src="bottom img" />
    <img class="top" src="top img" />
    </div>
    </a>

    ואת ה CSS הבא:
    ‪#‎cf‬ img.bottom {
    opacity:0;
    }
    #cf {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
    }
    #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    }
    #cf img.top:hover {
    opacity:0;
    }
    #cf img.bottom:hover {
    opacity:1;
    }
    הבעיה שלי היא שאני לא מצליח לגרום לתמונה התחתונה להיות נסתרת לפני המעבר עם העכבר, כך שהיא מציצה מעט מבעד לתמונה המקורית.

    #62269

    Noa
    משתתף

    צהריים טובים,

    אפשר קישור לעמוד עם התמונה המדוברת?

    #62271

    yoavkumma
    משתתף
    תגובה זו סומנה כפרטית.
    #62280

    Noa
    משתתף

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

    אבל אתה יכול לנסות לתת לתמונה שמעל טיפה יותר width, לדוגמה כך:

    img.top{width:161px;}

    #62283

    yoavkumma
    משתתף

    אני מצליח להעלים את התמונה התחתונה כך:
    img.bottom { opacity:0;}
    אבל אני לא מצליח לגרום לה לחזור עם המעבר של העכבר
    ניסיתי עם זה:
    img.bottom:hover { opacity:1;}
    אבל ללא הצלחה

    #62319

    Noa
    משתתף

    אני רואה שעכשיו זה הסתדר לא?

    #62321

    yoavkumma
    משתתף

    כן. הוספתי z-index גבוה יותר לתמונה התחתונה וזה הסתדר

    תודה!

מוצגות 7 תגובות – 1 עד 7 (מתוך 7 סה״כ)

הפורום 'תמיכה' נסגר לדיונים ולתגובות חדשות.