סאבי / בלוג / CSS / רעיונות ל Image Hover Effects – אפקט ריחוף על תמונות

רעיונות ל Image Hover Effects – אפקט ריחוף על תמונות

נכתב ע״י רועי יוסף •עודכן ב-27 לאוקטובר, 2024 • 24 תגובות

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

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

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

דוגמאות ל Hover Effects במעבר עכבר על תמונות

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

1. לילי

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

2. סיידי

הולי הקדושה
הולי מעולם לא הורידה ממני את העיניים.
היא ממש מוזרה.
קרא עוד

3. דבש

4. ליילה

ירדן מנגן
כשירדן מגיעה, היא מביאה איתה קיץ אינסופי.
קרא עוד

5. אוסקר

מורן בגן
אוסקר הוא בחור הגון. הוא נוהג לנקות ספות בחינניות.
קרא עוד

6. מרלי

מרלי והכלב
מרלי ניסה לשכנע אותה אבל היא לא הסכימה.
קרא עוד

7. רובי

רובי אבוד
רובי אף פעם לא צריך עזרה. הוא מסתדר בעצמו.
קרא עוד

8. רוקסי

אבן כבדה
שירן הייתה החברה הכי טובה שלי. היום היא כבר בחוץ.
קרא עוד

9. בובה

איילת חולה
איילת מתנדפת באוויר הקר.
קרא עוד

10. רומיאו

רומיאו ויוליה
רומיאו תמיד אהב את יוליה. עד היום שהוא פגש את ליבי הנוטף דם.
קרא עוד

11. דקסטר

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

12. שרה

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

13. צ׳יקו

צ׳יקו פררה
הפחד הגדול ביותר של צ׳יקו הוא לפספס את האוטובוס בבוקר.
קרא עוד

14. מילו

הדס קורנת
הדס הלכה לקרחת היער. אהל לא מצאה את האוצר.
קרא עוד

15. יוליה

יוליה סקסית
היא אוהבת את הריח של הים.
היא אוהבת את הריח של הסם.
והיא צוללת עמוק לאור הבוקר האפרורי.
קרא עוד

16. גולית

יהודי נודד
כששמעון מגיע כדאי לכם לברוח.
קרא עוד

17. אירה

18. ווינסטון

19. סלינה

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

20. טרי

21. פוביה

22. אפולו

אפולו 11
המשחק האחרון של אפולו בסנוקר היה מוזר מאד.
קרא עוד

23. קירה

24. סטיב

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

25. משה

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

26. ג׳אז

רוק מודרני
כשהוא מתחיל לנגן, אף אחד לו סוגר את האוזניים.
קרא עוד

27. מינג

מני פאר
מני חשב שהתוכנית שלו טובה, אבל הוא טעה בגדול!
קרא עוד

28. לקסי

לירי קפצה
היא תמיד קפצה ראשונה כשמישהו הציעה עוגיה.
קרא עוד

29. דיוק

דיוק טרוק
דיוק מאד משועמם. הוא ממש לא יודע מה לעשות עם עצמו.
קרא עוד

כפי שראיתם חלק מהאפקטים עושים שימוש באייקונים כאלו ואחרים. חלקם הם Feather Icons מאת Cole Bemis וחלקם שייכים ל FontAwesome. אם אתם מעוניינים להטמיע את אותם אפקטים המשתמשים באייקונים עליכם להוסיף את אותם פונטים ל CSS שלכם או לקרוא לספריית FontAwesome המצורפת בקישור זה.

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

.grid *,.grid *:after, .grid *:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	float: right;
	overflow: hidden;
	 margin: 10px auto;
	width: 100%;
	max-width: 100%;
	max-height: 390px;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
	width: 100%;
}

.grid figure figcaption {
	padding: 2em;
	color: #fefefe;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

ייתכן ותאלצו לשחק עם ה max-height של הקלאס .grid figure על מנת להתאים את האפקטים לגודל התמונות באתר שלכם. על מקרה, בואו נראה את ה HTML וה CSS הרלוונטי עבור כל אפקט.

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

הוספת אפקט Hover על תמונות – דוגמאות קוד מלאות

1. לילי

<div class="grid">
    <figure class="effect-lily">
        <img src="../img/12.jpg" alt="img12"/>
        <figcaption>
            <div>
                <h3>מיכל&nbsp;<span>החמודה</span></h3>
                <p>מיכל אוהבת לשחק עם עפרונות ומחטים.</p>
            </div>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

לילי

/*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(40px,0, 0);
	transform: translate3d(40px,0,0);
}

figure.effect-lily figcaption {
	text-align: right;
}

figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	height: 50%;
}

figure.effect-lily h3,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-lily h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-lily p {
	color: rgba(255,255,255,0.8);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
	opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h3,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}

2. סיידי

<div class="grid">
    <figure class="effect-sadie">
        <img src="../img/2.jpg" alt="img02"/>
        <figcaption>
            <h3>הולי&nbsp;<span>הקדושה</span></h3>
            <p>הולי מעולם לא הורידה ממני את העיניים.<br>היא ממש מוזרה.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

סיידי

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h3 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #484c61;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h3 {
	color: #fefefe;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

3. דבש

<div class="grid">
    <figure class="effect-honey">
        <img src="../img/4.jpg" alt="img04"/>
        <figcaption>
            <h3>דבש&nbsp;<span>מתוק</span> <i>תמיד</i></h3>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

דבש

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
	background: #4a3753;
}

figure.effect-honey img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-honey:hover img {
	opacity: 0.5;
}

figure.effect-honey figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: #fefefe;
	content: '';
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-honey h3 {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 1em 1.5em;
	width: 100%;
	text-align: right;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-honey h3 i {
	font-style: normal;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h3,
figure.effect-honey:hover h3 i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

4. ליילה

<div class="grid">
    <figure class="effect-layla">
        <img src="../img/6.jpg" alt="img06"/>
        <figcaption>
            <h3>ירדן&nbsp;<span>מנגן</span></h3>
            <p>כשירדן מגיעה, היא מביאה איתה קיץ אינסופי.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

ליילה

/*---------------*/
/***** Layla *****/
/*---------------*/

figure.effect-layla {
	background: #18a367;
}

figure.effect-layla img {
	height: 420px;
}

figure.effect-layla figcaption {
	padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
	position: absolute;
	content: '';
	opacity: 0;
}

figure.effect-layla figcaption::before {
	top: 50px;
	right: 30px;
	bottom: 50px;
	left: 30px;
	border-top: 1px solid #fefefe;
	border-bottom: 1px solid #fefefe;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
	top: 30px;
	right: 50px;
	bottom: 30px;
	left: 50px;
	border-right: 1px solid #fefefe;
	border-left: 1px solid #fefefe;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

figure.effect-layla h3 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-layla p {
	padding: 0.5em 2em;
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h3 {
	-webkit-transform: translate3d(0,-30px,0);
	transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-layla:hover h3,
figure.effect-layla:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h3,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

5. אוסקר

<div class="grid">
    <figure class="effect-oscar">
        <img src="../img/9.jpg" alt="img09"/>
        <figcaption>
            <h3>מורן&nbsp;<span>בגן</span></h3>
            <p>אוסקר הוא בחור הגון. הוא נוהג לנקות ספות בחינניות.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

אוסקר

/*---------------*/
/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
	background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
	padding: 3em;
	background-color: rgba(58,52,42,0.7);
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fefefe;
	content: '';
}

figure.effect-oscar h3 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

figure.effect-oscar:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-oscar:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
	opacity: 0.4;
}

6. מרלי

<div class="grid">
    <figure class="effect-marley">
        <img src="../img/11.jpg" alt="img11"/>
        <figcaption>
            <h3>מרלי&nbsp;<span>והכלב</span></h3>
            <p>מרלי ניסה לשכנע אותה אבל היא לא הסכימה.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

מרלי

/*---------------*/
/***** Marley *****/
/*---------------*/

figure.effect-marley figcaption {
	text-align: right;
}

figure.effect-marley h3,
figure.effect-marley p {
	position: absolute;
	right: 30px;
	left: 30px;
	padding: 10px 0;
}


figure.effect-marley p {
	bottom: 30px;
	line-height: 1.5;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-marley h3 {
	top: 30px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-marley:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-marley h3::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 4px;
	background: #fefefe;
	content: '';
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-marley h3::after,
figure.effect-marley p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-marley:hover h3::after,
figure.effect-marley:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

7. רובי

<div class="grid">
    <figure class="effect-ruby">
        <img src="../img/13.jpg" alt="img13"/>
        <figcaption>
            <h3>רובי&nbsp;<span>אבוד</span></h3>
            <p>רובי אף פעם לא צריך עזרה. הוא מסתדר בעצמו.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

רובי

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
	background-color: #17819c;
}

figure.effect-ruby img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-ruby h3 {
	margin-top: 20%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
	margin: 1em 0 0;
	padding: 3em;
	border: 1px solid #fefefe;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);
}

figure.effect-ruby:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

8. רוקסי

<div class="grid">
    <figure class="effect-roxy">
        <img src="../img/15.jpg" alt="img15"/>
        <figcaption>
            <h3>אבן&nbsp;<span>כבדה</span></h3>
            <p>שירן הייתה החברה הכי טובה שלי. היום היא כבר בחוץ.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

רוקסי

/*---------------*/
/***** Roxy *****/
/*---------------*/

figure.effect-roxy {
	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

figure.effect-roxy img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(50px,0,0);
	transform: translate3d(50px,0,0);
}

figure.effect-roxy figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fefefe;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-20px,0,0);
	transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
	padding: 3em;
	text-align: left;
}

figure.effect-roxy h3 {
	padding: 30% 0 10px 0;
}

figure.effect-roxy p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
}

figure.effect-roxy:hover img {
	opacity: 0.7;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

9. בובה

<div class="grid">
    <figure class="effect-bubba">
        <img src="../img/2.jpg" alt="img02"/>
        <figcaption>
            <h3>איילת&nbsp;<span>חולה</span></h3>
            <p>איילת מתנדפת באוויר הקר.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

בובה

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
	background: #9e5406;
}

figure.effect-bubba img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fefefe;
	border-bottom: 1px solid #fefefe;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-right: 1px solid #fefefe;
	border-left: 1px solid #fefefe;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h3 {
	padding-top: 30%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
	padding: 20px 2.5em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-bubba:hover h3,
figure.effect-bubba:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

10. רומיאו

<div class="grid">
    <figure class="effect-romeo">
        <img src="../img/17.jpg" alt="img17"/>
        <figcaption>
            <h3>רומיאו&nbsp;<span>ויוליה</span></h3>
            <p>רומיאו תמיד אהב את יוליה. עד היום שהוא פגש את ליבי הנוטף דם.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

רומיאו

*---------------*/
/***** Romeo *****/
/*---------------*/

figure.effect-romeo {
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

figure.effect-romeo img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,0,300px);
	transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
	opacity: 0.6;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 1px;
	background: #fefefe;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
	opacity: 0.5;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
	transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
	opacity: 0.5;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
	transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h3,
figure.effect-romeo p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-romeo h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
	padding: 0.25em 2em;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

11. דקסטר

<div class="grid">
    <figure class="effect-dexter">
        <img src="../img/19.jpg" alt="img19"/>
        <figcaption>
            <h3>דקסטר&nbsp;<span>רצח</span></h3>
            <p>דקסטר רצח אנשים בלי לראות בעיניים. המון אנשים חסרים...</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

דקסטר

/*---------------*/
/***** Dexter *****/
/*---------------*/

figure.effect-dexter {
	background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
	background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
}

figure.effect-dexter img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-dexter:hover img {
	opacity: 0.4;
}

figure.effect-dexter figcaption::after {
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	height: -webkit-calc(50% - 30px);
	height: calc(50% - 30px);
	border: 7px solid #fefefe;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-100%,0);
	transform: translate3d(0,-100%,0);
}

figure.effect-dexter:hover figcaption::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-dexter figcaption {
	padding: 3em;
	text-align: left;
}

figure.effect-dexter p {
	position: absolute;
	right: 60px;
	bottom: 60px;
	left: 60px;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
}

figure.effect-dexter:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

12. שרה

<div class="grid">
    <figure class="effect-sarah">
        <img src="../img/13.jpg" alt="img13"/>
        <figcaption>
            <h3>שרה&nbsp;<span>יודעת</span></h3>
            <p>שרה אוהבת לצפות בעננים. היא מחכה להם מאד.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

שרה

/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
	background: #42b078;
}

figure.effect-sarah img {
	max-width: none;
	width: -webkit-calc(100% + 20px);
	width: calc(100% + 20px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(10px,0,0);
	transform: translate3d(10px,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-sarah:hover img {
	opacity: 0.4;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
	text-align: left;
}

figure.effect-sarah h3 {
	position: relative;
	overflow: hidden;
	padding: 0.5em 0;
	text-align: right;
}

figure.effect-sarah h3::after {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 3px;
	background: #fefefe;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover h3::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	text-align: right;
}

figure.effect-sarah:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

13. צ׳יקו

<div class="grid">
    <figure class="effect-chico">
        <img src="../img/15.jpg" alt="img15"/>
        <figcaption>
            <h3>צ׳יקו&nbsp;<span>פררה</span></h3>
            <p>הפחד הגדול ביותר של צ׳יקו הוא לפספס את האוטובוס בבוקר.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

צ׳יקו

/*---------------*/
/***** Chico *****/
/*---------------*/

figure.effect-chico img {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.12);
	transform: scale(1.12);
}

figure.effect-chico:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico figcaption {
	padding: 3em;
}

figure.effect-chico figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 1px solid #fefefe;
	content: '';
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico h3 {
	padding: 20% 0 20px 0;
}

figure.effect-chico p {
	margin: 0 auto;
	max-width: 200px;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

14. מילו

<div class="grid">
    <figure class="effect-milo">
        <img src="../img/11.jpg" alt="img11"/>
        <figcaption>
            <h3>הדס&nbsp;<span>קורנת</span></h3>
            <p>הדס הלכה לקרחת היער. אהל לא מצאה את האוצר.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

מילו

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
	background: #2e5d5a;
}

figure.effect-milo img {
	max-width: none;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
	transform: translate3d(-30px,0,0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-milo:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h3 {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1em 1.2em;
}

figure.effect-milo p {
	padding: 0 10px 0 0;
	width: 50%;
	border-right: 1px solid #fefefe;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0,0);
	transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

15. יוליה

<div class="grid">
    <figure class="effect-julia">
        <img src="../img/21.jpg" alt="img21"/>
        <figcaption>
            <h3>יוליה&nbsp;<span>סקסית</span></h3>
            <div>
                <p>היא אוהבת את הריח של הים.</p>
                <p>היא אוהבת את הריח של הסם.</p>
                <p>והיא צוללת עמוק לאור הבוקר האפרורי.</p>
            </div>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

יוליה

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
	background: #2f3238;
}

figure.effect-julia img {
	max-width: none;
	height: 400px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: right;
}

figure.effect-julia h3 {
	position: relative;
	padding: 0.5em 0;
	text-align: right;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.9);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(660px,0,0);
	transform: translate3d(660px,0,0);
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

16. גולית

<div class="grid">
    <figure class="effect-goliath">
        <img src="../img/23.jpg" alt="img23"/>
        <figcaption>
            <h3>יהודי&nbsp;<span>נודד</span></h3>
            <p>כששמעון מגיע כדאי לכם לברוח.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

גולית

/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
	background: #df4e4e;
}

figure.effect-goliath img,
figure.effect-goliath h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-goliath img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-goliath h3,
figure.effect-goliath p {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 30px;
}

figure.effect-goliath p {
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-40px,0);
}

figure.effect-goliath:hover h3 {
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
}

figure.effect-goliath:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

17. אירה

<div class="grid">
    <figure class="effect-hera">
        <img src="../img/17.jpg" alt="img17"/>
        <figcaption>
            <h3>קרה&nbsp;<span>בירה</span></h3>
            <p>
                <a href=""><i class="fa fa-fw fa-file-pdf-o"></i></a>
                <a href=""><i class="fa fa-fw fa-file-image-o"></i></a>
                <a href=""><i class="fa fa-fw fa-file-archive-o"></i></a>
                <a href=""><i class="fa fa-fw fa-file-code-o"></i></a>
            </p>
        </figcaption>
    </figure>
</div>

אירה

/*-----------------*/
/***** Hera *****/
/*-----------------*/

figure.effect-hera {
	background: #303fa9;
}

figure.effect-hera h3 {
	font-size: 158.75%;
}

figure.effect-hera h3,
figure.effect-hera p {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	border: 2px solid #fefefe;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera p {
	width: 100px;
	text-transform: none;
	font-size: 121%;
	line-height: 2;
}

figure.effect-hera p a {
	color: #fefefe;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
	opacity: 0.6;
}

figure.effect-hera p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
	-webkit-transform: translate3d(-60px,60px,0);
	transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
	-webkit-transform: translate3d(60px,60px,0);
	transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
	opacity: 1;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h3 {
	opacity: 0;
	-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
	transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
	opacity: 1;
}

18. ווינסטון

<div class="grid">
    <figure class="effect-winston">
        <img src="../img/30.jpg" alt="img30"/>
        <figcaption>
            <h3>לייט&nbsp;<span>ווינסטון</span></h3>
            <p>
                <a href=""><i class="fa fa-fw fa-star-o"></i></a>
                <a href=""><i class="fa fa-fw fa-comments-o"></i></a>
                <a href=""><i class="fa fa-fw fa-envelope-o"></i></a>
            </p>
        </figcaption>
    </figure>
</div>

ווינסטון

/*-----------------*/
/***** Winston *****/
/*-----------------*/

figure.effect-winston {
	background: #162633;
	text-align: right;
}

figure.effect-winston img {
	-webkit-transition: opacity 0.45s;
	transition: opacity 0.45s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-winston figcaption::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url(../img/triangle.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transform: rotate3d(0,0,1,45deg);
	transform: rotate3d(0,0,1,45deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

figure.effect-winston h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-winston p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.4em 5% 0;
}

figure.effect-winston a {
	margin: 0 10px;
	color: #5d504f;
	font-size: 170%;
}

figure.effect-winston a:hover,
figure.effect-winston a:focus {
	color: #cc6055;
}

figure.effect-winston p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-winston:hover img {
	opacity: 0.6;
}

figure.effect-winston:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: rotate3d(0,0,1,20deg);
	transform: rotate3d(0,0,1,22deg);
}

figure.effect-winston:hover p i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover p a:nth-child(3) i {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-winston:hover p a:nth-child(2) i {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-winston:hover p a:first-child i {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

19. סלינה

<div class="grid">
    <figure class="effect-selena">
        <img src="../img/10.jpg" alt="img10"/>
        <figcaption>
            <h3>קפה&nbsp;<span>של בוקר</span></h3>
            <p>לסלינה יש המון נקודות חן יפות וכתומות.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

סלינה

/*-----------------*/
/***** Selena *****/
/*-----------------*/

figure.effect-selena {
	background: #fefefe;
}

figure.effect-selena img {
	opacity: 0.95;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-selena p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
	transform: perspective(1000px) rotate3d(1,0,0,90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

figure.effect-selena:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
	opacity: 1;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
	transform: perspective(1000px) rotate3d(1,0,0,0);
}

20. טרי

<div class="grid">
    <figure class="effect-terry">
        <img src="../img/16.jpg" alt="img16"/>
        <figcaption>
            <h3>ילדה&nbsp;<span>קטנה</span></h3>
            <p>
                <a href=""><i class="fa fa-fw fa-download"></i></a>
                <a href=""><i class="fa fa-fw fa-heart"></i></a>
                <a href=""><i class="fa fa-fw fa-share"></i></a>
                <a href=""><i class="fa fa-fw fa-tags"></i></a>
            </p>
        </figcaption>
    </figure>
</div>

טרי

/*-----------------*/
/***** Terry *****/
/*-----------------*/

figure.effect-terry {
	background: #34495e;
}

figure.effect-terry figcaption {
	padding: 1em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
	position: absolute;
	width: 200%;
	height: 200%;
	border-style: solid;
	border-color: #2d2d2d;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
	right: 0;
	bottom: 0;
	border-width: 0 70px 60px 0;
	-webkit-transform: translate3d(70px,60px,0);
	transform: translate3d(70px,60px,0);
}

figure.effect-terry figcaption::after {
	top: 0;
	left: 0;
	border-width: 15px 0 0 15px;
	-webkit-transform: translate3d(-15px,-15px,0);
	transform: translate3d(-15px,-15px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
	opacity: 0.85;
}

figure.effect-terry h3 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0.4em 10px;
	width: 50%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	text-align: l;
}

@media screen and (max-width: 920px) {
	figure.effect-terry h3 {
		padding: 0.75em 10px;
		font-size: 120%;
	}
}

figure.effect-terry p {
	float: right;
	clear: both;
	text-align: left;
	text-transform: none;
	font-size: 111%;
}

figure.effect-terry p a {
	display: block;
	margin-bottom: 1em;
	color: #fefefe;
	opacity: 0;
	-webkit-transform: translate3d(90px,0,0);
	transform: translate3d(90px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
	color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-terry:hover img {
	opacity: 0.6;

}

figure.effect-terry:hover h3,
figure.effect-terry:hover p a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-terry:hover p a {
	opacity: 1;
}

figure.effect-terry:hover p a:first-child {
	-webkit-transition-delay: 0.025s;
	transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
	-webkit-transition-delay: 0.075s;
	transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

21. פוביה

<div class="grid">
    <figure class="effect-phoebe">
        <img src="../img/3.jpg" alt="img03"/>
        <figcaption>
            <h3>מוצארט&nbsp;<span>ניגן</span></h3>
            <p>
                <a href=""><i class="fa fa-fw fa-user"></i></a>
                <a href=""><i class="fa fa-fw fa-heart"></i></a>
                <a href=""><i class="fa fa-fw fa-cog"></i></a>
            </p>
        </figcaption>
    </figure>
</div>

פוביה

/*-----------------*/
/***** Phoebe *****/
/*-----------------*/

figure.effect-phoebe {
	background: #675983;
}

figure.effect-phoebe img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-phoebe:hover img {
	opacity: 0.6;
}

figure.effect-phoebe figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/triangle2.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(5,2.5,1);
	transform: scale3d(5,2.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-phoebe h3 {
	margin-top: 1em;
	-webkit-transition: transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-phoebe:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-phoebe p a {
	color: #fefefe;
	font-size: 140%;
	opacity: 0;
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-phoebe p a:first-child {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-phoebe p a:nth-child(2) {
	-webkit-transform: translate3d(0,60px,0);
	transform: translate3d(0,60px,0);
}

figure.effect-phoebe p a:nth-child(3) {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-phoebe:hover p a {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

22. אפולו

<div class="grid">
    <figure class="effect-apollo">
        <img src="../img/18.jpg" alt="img18"/>
        <figcaption>
            <h3>אפולו&nbsp;<span>11</span></h3>
            <p>המשחק האחרון של אפולו בסנוקר היה מוזר מאד.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

אפולו

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: #3498db;
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #fefefe;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo h3 {
	text-align: right;
}

figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

23. קירה

<div class="grid">
    <figure class="effect-kira">
        <img src="../img/17.jpg" alt="img17"/>
        <figcaption>
            <h3>יבלת&nbsp;<span>כואבת</span></h3>
            <p>
                <a href=""><i class="fa fa-fw fa-home"></i></a>
                <a href=""><i class="fa fa-fw fa-download"></i></a>
                <a href=""><i class="fa fa-fw fa-heart"></i></a>
                <a href=""><i class="fa fa-fw fa-share"></i></a>
            </p>
        </figcaption>
    </figure>
</div>

קירה

/*-----------------*/
/***** Kira *****/
/*-----------------*/

figure.effect-kira {
	background: #fefefe;
	text-align: right;
}

figure.effect-kira img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-kira figcaption {
	z-index: 1;
}

figure.effect-kira p {
	padding: 2.25em 0.5em;
	font-weight: 600;
	font-size: 100%;
	line-height: 1.5;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-kira p a {
	margin: 0 0.5em;
	color: #101010;
}

figure.effect-kira p a:hover,
figure.effect-kira p a:focus {
	opacity: 0.6;
}

figure.effect-kira figcaption::before {
	position: absolute;
	top: 0;
	right: 2em;
	left: 2em;
	z-index: -1;
	height: 3.5em;
	background: #fefefe;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
	transform: translate3d(0,4em,0) scale3d(1,0.023,1);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

figure.effect-kira:hover img {
	opacity: 0.5;
}

figure.effect-kira:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-kira:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
	transform: translate3d(0,5em,0) scale3d(1,1,1);
}

24. סטיב

<div class="grid">
    <figure class="effect-steve">
        <img src="../img/29.jpg" alt="img29"/>
        <figcaption>
            <h3>סטיב&nbsp;<span>הנדיב</span></h3>
            <p>הוא פחד מאד מלנצל אנשים אחרים.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

סטיב

/*-----------------*/
/***** Steve *****/
/*-----------------*/

figure.effect-steve {
	z-index: auto;
	/* overflow: visible; */
	background: #2d2d2d;
}

figure.effect-steve:before,
figure.effect-steve h3:before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #000;
	content: '';
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-steve:before {
	box-shadow: 0 3px 30px rgba(0,0,0,0.8);
	opacity: 0;
}

figure.effect-steve figcaption {
	z-index: 1;
}

figure.effect-steve img {
	opacity: 1;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: perspective(1000px) translate3d(0,0,0);
	transform: perspective(1000px) translate3d(0,0,0);
}

figure.effect-steve h3,
figure.effect-steve p {
	background: #fefefe;
	color: #2d434e;
}

figure.effect-steve h3 {
	position: relative;
	margin-top: 2em;
	padding: 0.25em;
}

figure.effect-steve h3:before {
	box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

figure.effect-steve p {
	margin-top: 1em;
	padding: 0.5em;
	font-weight: 800;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(0.9,0.9,1);
	transform: scale3d(0.9,0.9,1);
}

figure.effect-steve:hover:before {
	opacity: 1;
}

figure.effect-steve:hover img {
	-webkit-transform: perspective(1000px) translate3d(0,0,21px);
	transform: perspective(1000px) translate3d(0,0,21px);
}

figure.effect-steve:hover h3:before {
	opacity: 0;
}

figure.effect-steve:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

25. משה

<div class="grid">
    <figure class="effect-moses">
        <img src="../img/24.jpg" alt="img24"/>
        <figcaption>
            <h3>משה&nbsp;<span>בתיבה</span></h3>
            <p>משה תמיד הרגיש קרוב לחיות הבר.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

משה

/*-----------------*/
/***** Moses *****/
/*-----------------*/

figure.effect-moses {
	background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
	background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
}

figure.effect-moses img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-moses h3,
figure.effect-moses p {
	padding: 20px;
	width: 50%;
	height: 50%;
	border: 2px solid #fefefe;
}

figure.effect-moses h3 {
	padding: 20px;
	width: 50%;
	height: 50%;
	text-align: right;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(-10px,10px,0);
}

figure.effect-moses p {
	float: left;
	padding: 20px;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(50%,-50%,0);
	transform: translate3d(50%,-50%,0);
}

figure.effect-moses:hover h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-moses:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-moses:hover img {
	opacity: 0.6;
}

26. ג׳אז

<div class="grid">
    <figure class="effect-jazz">
        <img src="../img/25.jpg" alt="img25"/>
        <figcaption>
            <h3>רוק&nbsp;<span>מודרני</span></h3>
            <p>כשהוא מתחיל לנגן, אף אחד לו סוגר את האוזניים.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

ג׳אז

/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.effect-jazz {
	background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
	background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
}

figure.effect-jazz img {
	opacity: 0.9;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz figcaption::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #fefefe;
	border-bottom: 1px solid #fefefe;
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-jazz h3,
figure.effect-jazz p {
	opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h3 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-jazz p {
	padding: 0.5em 2em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
}

figure.effect-jazz:hover img {
	opacity: 0.7;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after {
	opacity: 1;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h3,
figure.effect-jazz:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

27. מינג

<div class="grid">
    <figure class="effect-ming">
        <img src="../img/9.jpg" alt="img09"/>
        <figcaption>
            <h3>פאר&nbsp;<span>פאר</span></h3>
            <p>מני חשב שהתוכנית שלו טובה, אבל הוא טעה בגדול!</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

מינג

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
	background: #030c17;
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fefefe;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h3 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h3 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}

28. לקסי

<div class="grid">
    <figure class="effect-lexi">
        <img src="../img/12.jpg" alt="img12"/>
        <figcaption>
            <h3>לירי&nbsp;<span>קפצה</span></h3>
            <p>היא תמיד קפצה ראשונה כשמישהו הציעה עוגיה.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

לקסי

/*---------------*/
/***** Lexi *****/
/*---------------*/

figure.effect-lexi {
	background: -webkit-linear-gradient(-45deg, #000 0%,#fefefe 100%);
	background: linear-gradient(-45deg, #000 0%,#fefefe 100%);
}

figure.effect-lexi img {
	margin: -10px 0 0 -10px;
	max-width: none;
	width: -webkit-calc(100% + 10px);
	width: calc(100% + 10px);
	opacity: 0.9;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
	position: absolute;
	left: -100px;
	bottom: -100px;
	width: 300px;
	height: 300px;
	border: 2px solid #fefefe;
	border-radius: 50%;
	box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transform: scale3d(0.5,0.5,1);
	transform: scale3d(0.5,0.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
	opacity: 0.6;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lexi h3 {
	text-align: right;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(5px,5px,0);
	transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0 1.5em 1.5em 0;
	width: 140px;
	text-align: right;
	opacity: 0;
	-webkit-transform: translate3d(-20px,20px,0);
	transform: translate3d(-20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-lexi:hover h3,
figure.effect-lexi:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

29. דיוק

<div class="grid">
    <figure class="effect-duke">
        <img src="../img/27.jpg" alt="img27"/>
        <figcaption>
            <h3>דיוק&nbsp;<span>טרוק</span></h3>
            <p>דיוק מאד משועמם. הוא ממש לא יודע מה לעשות עם עצמו.</p>
            <a href="">קרא עוד</a>
        </figcaption>
    </figure>
</div>

דיוק

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
	background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
	background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
	opacity: 0.1;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
}

figure.effect-duke h3 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

figure.effect-duke p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 20px;
	padding: 30px;
	border: 2px solid #fefefe;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% -100%;
	transform-origin: 50% -100%;
	right: 0;
}

figure.effect-duke:hover h3,
figure.effect-duke:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

לסיכום

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

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

Credits for the CSS and demos goes to Mary Lou from Codrops. images to Unsplash.

כותב הפוסט : רועי יוסף

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

בנושא CSS

[

עיצוב האות הראשונה ב CSS בעזרת first-letter::

]

[

מספר מילים על ה pseudo-element בשם ::marker

]

24 תגובות...

הוסיפו תגובה חדשה

רוב 26 דצמבר 2018, 11:23
נהדר כמו תמיד.
מצאתי תוסף שעושה את זה אבל הוא לא עובד כמו שצריך. הייתי צריך משהו כמו האפקט של 'לילי' שיש כותרת ומתחת לזה טקסט אבל הכותרת הייתה גבוהה מידי וגם לא היה יישור לימין וגם לא קישור.
יש לך פתרון לזה?
הגב #
- רועי יוסף 27 דצמבר 2018, 21:41
  אני מניח שהפתרון הוא לשחק עם ה CSS, או של התוסף או של הקוד שאתה מטמיע בעצמך..
  הגב #
- גיא 3 פברואר 2021, 2:16
  היי רועי , התרשמתי מהאפקטים של התמונות ואני מעוניין להטמיע את הקודים:
  1. איפה אני מכניס את קוד html? למשל אם יש לי דף ובחלק מהתמונות אני רוצה את האפקט, אני צריך להטמיע את ה html בתחילת העריכה הכללית של העמוד או איפה להטמיע? …
  2. לגבי קוד css אני מטמיע בתמונות, מסמן את החלק שבוא התמונה נמצאת, נכנס לעריכה ובתיבת קוד מטמיע, זה בסדר הבנתי, לגבי html אני לא הבנתי. ובמשחק אחכ בתוך הקוד שינויים קלים גם אני יודע מניסיון עם קודים אחרים.
  תודה רבה , והאפקטים מרהיבים כל הכבוד
  הגב #
  - רועי יוסף 3 פברואר 2021, 10:17
    היי גיא,
    קצת קשה להסביר, עקרונית קוד ה HTML הוא ה markup שצריך להופיע עליו אתה מיישם את ה CSS. נדרשת הבנה ב HTML בכדי לבצע זאת ולהגיע לתוצאה הרצויה..
    הגב #
    - גיא 3 פברואר 2021, 10:59
      כשאני באלמנטור נכנס לעריכת הדף , במקום שאני מכניס את התמונה , אחרי זה בעריכה לשונית מתקדם , יש מקום למטה להכניס קוד css , עושה שמור , חוזר אחורה יוצא לעריכה הרגילה , שם יש אפשרות לראות את התמונה ומתחת מופיע לי + , לוחץ ויש אפשרות להכניס קוד html . ניסיתי בדרך הזאת לא יצא כלום .
      אין לי ניסיות בתכנות ובשפת מפתחי אתרים וקודים אבל אני כן קצת מנוסה מתחיל בעיצוב הדף ובהבנת האלמנטור בסיסי פלוס
      הגב #
      - רועי יוסף 3 פברואר 2021, 11:03
        תאלץ לשאול אדם המכיר את אלמנטור כמו שצריך….
        הגב #
        
        גיא 3 פברואר 2021, 11:05
        תודה
        הגב #
אורי 26 דצמבר 2018, 22:47
הי, אחלה של מאמר מושקע! לא בטוח מה הערך של זה בסלולרי….
אם לא ילחצו על התמונות לא יראו….
הגב #
- רועי יוסף 29 דצמבר 2018, 9:45
  היי אורי,
  דווקא עובד טוב במובייל… אצלי לפחות 🙂
  הגב #
  - יהודה לוי 16 ינואר 2019, 13:47
    הי רועי – סחתיין על הפוסט ושאר המאמרים המצויינים שלך!
    בקשר לשאלה של אורי: אני חושב שהוא התכוון שאפקטים של הובר לא רלוונטיים למובייל כי אין עכבר במובייל, ולכן אין הובר. מה שיש זה רק קליקים לא? או שאני טועה?
    הגב #
    - רועי יוסף 17 ינואר 2019, 10:47
      היי יהודה,
      אולי, הוא דווקא רשם ״יילחצו״ וכשלוחצים דווקא רואים את האפקט…
      הגב #
      - יהודה לוי 17 ינואר 2019, 12:35
        אני הבנתי שהוא אומר שלמעט אם לוחצים – לא רואים. והרי אנחנו רוצים הובר… אבל אין מה לעשות – ככה זה עובד במובייל, אין מה לעשות אל מול זה.
        הגב #
שלי 27 דצמבר 2018, 11:26
תותח!
אבל מעניין אותי לדעת מה אתה ממליץ לעשות במידה ואני עובדת עם תבנית והייתי רוצה לכל התמונות שבה להוסיף את אחד האפקטים שיש כאן ברשימה? (לא כזה שיש בו טקסט). להעתיק את הקלאס הראשי של אותו סוג תמונה שאני רוצה ועליו להפעיל את *כל* ה CSS שצירפת?
או להוסיף לקלאס הקיים קלאס חדש שאצור שיכיל את כל ה CSS קוד שצירפת?
הגב #
מירה 28 דצמבר 2018, 8:28
היי! תודה רבה!
1. אפשר הסבר למשתמשי אלמנטור חסרי ידע בתכנות?
את הקוד הראשוני הכללי לשתול בתבנית ואת הקוד של כל אפקט לשתול ב-CSS מותאם של התמונה?
2. יש לך פוסט על איך עושים את הניווט המהיר שיש פה בצד? זה בדיוק מה שאני מחפשת!
הגב #
- רועי יוסף 28 דצמבר 2018, 14:28
  היי מירה,
  לצערי אין לי דרך להסביר כיצד לבצע זאת באלמנטור. באופן כללי הדרך שתיארת היא הדרך הנכונה אך אולי תשקלי להעזר במתכנת. לגבי השאלה השנייה, אין לי כרגע פוסט המסביר כיצד לעשות זאת.
  הגב #
  - נתנאל 16 ינואר 2019, 11:38
    אם יש לך סטייל שיט שאפשר לתת משתמשים להשתמש בו, אפשר להגדיר באלמנטור קלאס באופן חופשי. זה אמור לעבוד
    הגב #
    - יהודה לוי 16 ינואר 2019, 14:06
      נתנאל – אני בספק רב אם CSS לבדו יכול לאפשר את כל האפקטים האלה, הרי יש גם מבנה HTML שחייבים להיצמד אליו. אם אתם לא יודעים איך לממש את זה לבד בקוד של התבנית/פייג'-בילדר שלכם, אז במקומכם הייתי מוותר או לוקח בונה אתרים בשביל זה.
      אגב, אלמנטור לא תומך בהובר "מן הקופסה"? אם לא אז בטח יש לו פלאגינים בתשלום (נמוך מן הסתם) שיודעים לעשות את זה. ואני מאמין שהם בטח גם יוסיפו את זה בקרוב, כי זה פיצ'ר מאוד נדרש – DIVI למשל הוסיפו את זה לאחרונה וזה תענוג להשתמש.
      אגב 2, נראה לי שכדאי להיזהר מלשלב את ה-CSS שרועי צירף "סתם כך", שכן הוא מאוד כללי, ועלול לחרבש לכם תמונות אחרות שלמשל משתמשות בקלאסים grid figure. אם אתם משלבים אז תוסיפו עוד קלאס פרטי שלכם בכדי למנוע התנגשויות.
      הגב #
      - רועי יוסף 17 ינואר 2019, 10:48
        יהודה צודק לגבי ״אגב 2״ 🙂 שימו לב!
        הגב #
חני 16 ינואר 2019, 11:06
פוסט מרתק!! תודה
הגב #
הירצת פלדמן 4 פברואר 2019, 10:08
פוסט מעולה. בדיוק חיפשתי כאלה מלא.
אבל באמת השאלה מה עושים (במובייל) אם אני רוצה שכל הקופסה הזאת תהיה קישור לנושא- ובמוביל לא יספיקו לקרוא. זה יעבור לעמוד הפנימי. הוספתי כפתור אבל עדיין זה בעייתי במובייל שהכפתור נראה רק מלחיצה על הריבוע ואז עוד לחיצה..
הגב #
משה מירסקי 30 יוני 2019, 13:14
שלום רועי,
אני מחפש קרוסלת תמונות עם אפשרות להוספת כיתוב מתחת לתמונה הנבחרת, כפי שמופיע בגלריות לאמנות למשל
הגב #
- רועי יוסף 30 יוני 2019, 13:17
  היי משה,
  אם אתה מתעסק קצת בקוד אתה יכול לעשות זאת באמצעות Slick Slider ו ACF. איני מכיר תוסף שמספק זאת עבורך (אך זה לא אומר שלא קיים)..
  הגב #
  - משה מירסקי 1 יולי 2019, 11:23
    תודה, אנסה
    הגב #
חפציה 27 ספטמבר 2019, 12:57
יפייפה!
הלוואי שאצליח להתקדם מספיק ולהשתמש בכאלו דברים יפים. ,אני מחפשת דרך ליצור תצוגה מקדימה בזמן הובר על לינק. מצאתי תוסף Web Shrinker – Website Link Preview Thumbnails אבל הוא לא מפעיל את הפונקציה על השדות המיוחדים אלא רק לינקים בבלוק הבסיסי של הפוסט. יש קוד שיאפשר את זה?
הגב #

רעיונות ל Image Hover Effects – אפקט ריחוף על תמונות

דוגמאות ל Hover Effects במעבר עכבר על תמונות

מיכל החמודה

הולי הקדושה

דבש מתוק תמיד

ירדן מנגן

מורן בגן

מרלי והכלב

רובי אבוד

אבן כבדה

איילת חולה

רומיאו ויוליה

דקסטר רצח

שרה יודעת

צ׳יקו פררה

הדס קורנת

יוליה סקסית

יהודי נודד

בירה קרה

ווינסטון לייט

קפה של בוקר

ילדה קטנה

מוצארט ניגן

אפולו 11

יבלת כואבת

סטיב הנדיב

משה בתיבה

רוק מודרני

מני פאר

לירי קפצה

דיוק טרוק

הוספת אפקט Hover על תמונות – דוגמאות קוד מלאות

1. לילי

לילי

2. סיידי

סיידי

3. דבש

דבש

4. ליילה

ליילה

5. אוסקר

אוסקר

6. מרלי

מרלי

7. רובי

רובי

8. רוקסי

רוקסי

9. בובה

בובה

10. רומיאו

רומיאו

11. דקסטר

דקסטר

12. שרה

שרה

13. צ׳יקו

צ׳יקו

14. מילו

מילו

15. יוליה

יוליה

16. גולית

גולית

17. אירה

אירה

18. ווינסטון

ווינסטון

19. סלינה

סלינה

20. טרי

טרי

21. פוביה

פוביה

22. אפולו

אפולו

23. קירה

קירה

24. סטיב

סטיב