רעיונות ל Hover Effects על תמונות

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

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

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

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

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

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

1. לילי
img12

מיכל החמודה

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

קרא עוד
2. סיידי
img02

הולי הקדושה

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

קרא עוד
3. דבש
img04

דבש מתוק תמיד

קרא עוד
4. ליילה
img06

ירדן מנגן

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

קרא עוד
5. אוסקר
img09

מורן בגן

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

קרא עוד
6. מרלי
img11

מרלי והכלב

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

קרא עוד
7. רובי
img13

רובי אבוד

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

קרא עוד
8. רוקסי
img15

אבן כבדה

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

קרא עוד
9. בובה
img02

איילת חולה

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

קרא עוד
10. רומיאו
img17

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

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

קרא עוד
11. דקסטר
img19

דקסטר רצח

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

קרא עוד
12. שרה
img13

שרה יודעת

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

קרא עוד
13. צ׳יקו
img15

צ׳יקו פררה

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

קרא עוד
14. מילו
img11

הדס קורנת

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

קרא עוד
15. יוליה
img21

יוליה סקסית

היא אוהבת את הריח של הים.

היא אוהבת את הריח של הסם.

והיא צוללת עמוק לאור הבוקר האפרורי.

קרא עוד
16. גולית
img23

יהודי נודד

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

קרא עוד
17. אירה
img17

בירה קרה

18. ווינסטון
img30

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

19. סלינה
img10

קפה של בוקר

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

קרא עוד
20. טרי
img16

ילדה קטנה

21. פוביה
img03

מוצארט ניגן

22. אפולו
img18

אפולו 11

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

קרא עוד
23. קירה
img17

יבלת כואבת

24. סטיב
img29

סטיב הנדיב

הוא פחד מאד מלנצל אנשים אחרים.

קרא עוד
25. משה
img24

משה בתיבה

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

קרא עוד
26. ג׳אז
img25

רוק מודרני

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

קרא עוד
27. מינג
img09

מני פאר

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

קרא עוד
28. לקסי
img12

לירי קפצה

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

קרא עוד
29. דיוק
img27

דיוק טרוק

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

קרא עוד


כפי שראיתם חלק מהאפקטים עושים שימוש באייקונים כאלו ואחרים. חלקם הם 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.

רועי יוסף
רועי יוסף

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

14תגובות...
  • רוב 26 בדצמבר 2018, 11:23

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

    יש לך פתרון לזה?

  • אורי 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. אם אתם משלבים אז תוסיפו עוד קלאס פרטי שלכם בכדי למנוע התנגשויות.

  • חני 16 בינואר 2019, 11:06

    פוסט מרתק!! תודה

השאירו תגובה

פעימות
Up!