שלום,

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

ריבוע ימין

לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית נולום ארווס סאפיאן – פוסיליס קוויס, אקווזמן נולו ארווס סאפיאן – פוסיליס קוויס,

ריבוע שמאל

לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית נולום ארווס סאפיאן – פוסיליס קוויס, אקווזמן נולו ארווס סאפיאן – פוסיליס קוויס,

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

אז איך עשיתי את זה ?
פשוט מאד, זה קוד ה- HTML

<div id="bigbox">
	<div class="homeboxhover right">
		<h3>ריבוע ימין</h3>
			<p>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן נולו ארווס סאפיאן - פוסיליס קוויס,</p>
	</div>
	<div class="homeboxhover left">
		<h3>ריבוע שמאל</h3>
			<p>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית נולום ארווס סאפיאן - פוסיליס קוויס, אקווזמן נולו ארווס סאפיאן - פוסיליס קוויס,</p>
	</div>
	<div style="clear:both;"></div>
</div>

 
ואז כל שנשאר לעשות זה להכניס את קוד ה- CSS הבא, כמובן שניתן לשנות את הקוד בהתאם לנדרש בפרוייקט שלכם

#bigbox {
	width: 100%;
}
#bigbox .right {
	float: right;
	padding: 15px;
	width: 50%;
	text-align: center;
	border: 1px solid #333;
}
#bigbox .left {
	float: left;
	padding: 15px;
	width: 50%;
	text-align: center;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
}
.homeboxhover {
	background-image: linear-gradient(to left,
										transparent,
										transparent 50%,
										#ECF0F1 50%,
										#ECF0F1);
	background-position: 100% 0;
	background-size: 200% 100%;
	transition: all .25s ease-in;
}
.homeboxhover:hover {
	background-position: 0 0;
}

.homeboxhover.left {
	background-image: linear-gradient(to right,
									transparent,
									transparent 50%,
									#ECF0F1 50%,
									#ECF0F1);
	background-position: 0 100%;
	background-size: 200% 100%;
	transition: all .25s ease-in;
}
.homeboxhover.left:hover {
	background-position: 100% 0;
}

זהו, דיי פשוט, לא ?

תגובות

הגיבו

אין תגובות

השאירו תגובה

four × 1 =