Hover על תמונה + הוספת טקסט

[maor18]

אהלן חברים מה קורה?
כמו שכתבתי בכותרת, יש לי משימה לעשות תמונות בFLEX, ועל כל תמונה צריך לשים HOVER ייעודי עם טקסט ייעודי לכל אחת. אין לי מושג איך לעשות את זה ואני ממש צריך עזרה.
לדוגמה, יש לי תמונה, נתתי לה section בפנים עם קלאס נוסף של טקסט ובתוכו כיתוב כלשהו, אבל בCSS אין לי מושג איך אני צריך לכתוב את זה.

[etal]

כדאי היה להבהיר שאתה מדבר על HTML, לצורך מה שאתה צריך יש ב-CSS פסודו קלאס של hover

https://www.w3schools.com/csSref/sel_hover.asp

 

אם זה לא מספיק אני מציע שתעלה את הקוד שיש לך לאתר כמו https://jsfiddle.net/ כדי שאפשר יהיה להסתכל עליו ולעזור לך

נערך 2020 ביולי 15 על-ידי etal

[maor18]

ציטוט של etal

כדאי היה להבהיר שאתה מדבר על HTML, לצורך מה שאתה צריך יש ב-CSS פסודו קלאס של hover

https://www.w3schools.com/csSref/sel_hover.asp

 

אם זה לא מספיק אני מציע שתעלה את הקוד שיש לך לאתר כמו https://jsfiddle.net/ כדי שאפשר יהיה להסתכל עליו ולעזור לך

ראיתי את המדריך הזה אבל זה ממש סיבך אותי, אז אשמח שתעזור לי מעבר.

איך אני מעלה את הקוד לשם?

[etal]

האם אתה מצליח ליצור את העיצוב (תמונה וטקסט עליה) שאתה רוצה בלי hover?

 

ציטוט של maor18

איך אני מעלה את הקוד לשם?

העתק הדבק למקומות הרלוונטיים (html ו-css) ואז אתה לוחץ על save

אחרי זה תעתיק את ה-url לפה

[maor18]

ציטוט של etal

האם אתה מצליח ליצור את העיצוב (תמונה וטקסט עליה) שאתה רוצה בלי hover?

 

העתק הדבק למקומות הרלוונטיים (html ו-css) ואז אתה לוחץ על save

אחרי זה תעתיק את ה-url לפה

https://jsfiddle.net/maoraver/dfscze0q/

שמתי גם את קוד הCSS. בהערות בקוד הCSS אלה הקודים מW3S מאחד המדריכים שלהם שראיתי.

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

אגב, השימוש בסקשנים הוא לבקשת המורה, אסור לנו להשתמש בdiv.

[etal]

תכלס מבחינת העיצוב זה לא משנה section או div.

 

תסתכל פה ותנסה להבין מה קורה:

https://jsfiddle.net/gr71L5fx/

[maor18]

ציטוט של etal

תכלס מבחינת העיצוב זה לא משנה section או div.

 

תסתכל פה ותנסה להבין מה קורה:

https://jsfiddle.net/gr71L5fx/

קודם כל תודה על העזרה.

ראיתי מה עשית, גם את הסקשן של הoverlay סגרת במקום שונה שאני שם לב שזה game changer לגמרי.

עשיתי את זה על העבודה הנוכחית אצלי וזה אכן עובד אבל משהו שקצת לא ברור לי.

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

 

עריכה:

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

נערך 2020 ביולי 15 על-ידי maor18

[etal]

ציטוט של maor18

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

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

 

ציטוט של maor18

קודם כל תודה על העזרה.

ראיתי מה עשית, גם את הסקשן של הoverlay סגרת במקום שונה שאני שם לב שזה game changer לגמרי.

עשיתי את זה על העבודה הנוכחית אצלי וזה אכן עובד אבל משהו שקצת לא ברור לי.

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

 

עריכה:

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

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

[maor18]

ציטוט של etal

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

 

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

היי חבר, אשמח לעזרתך.

התקדמתי קצת הרבה בעבודה, אבל יש לי בעיה עם הצגת התמונות.

התמונות מוצגות לי אחת בגודל כזה ואחת בגודל כזה. 

אני אמור לעשות גלריה של 6 תמונות באמצעות FLEX, כך שאני מעוניין בעצם שיהיו לי 2 עמודות של 3 שורות, כל עמודה תמונה.

זה אמור להיות ככה

- -

- -

- -

משום מה כל תמונה בגודל שונה, אני לא יכול להשתמש בobject-fit(אסרו עלינו) ואני לא רוצה לתת height מסויים כי זה ימתח סתם תמונות וזה ייראה מכוער.

יש עוד דרך כלשהי?