css3 Transition slide hover تاثيرات

css3 Transition slide hover تاثيرات

css3 transition slide hover
طريقة عمل تاثير سلايد على الصورة من المؤثرات الجميلة التي تعطي شكل متميز لموقعك وتجعلة اكثر حيوية وان اغلب المتصفحات الحديثة تدعم هذة الخاصية ومن النقاط الايجابية بهذا الخصوص التقليل من استخدامك للجافا سكربت ويجب ان تكون على دراية بطريقة كتابة ملف الاستايل على الاقل

Download Now

Arabic HTML Hover Effects

......... Any paragraph ............

اقرء المزيد

.container{
	width: 800px;
	height: 450px;
	margin: 50px auto;
	overflow: hidden;
	position: relative;
	text-align: center;
	background: rgba(0, 0, 0, 0.8);
	box-shadow: 2px 2px 6px #333;
	cursor: default;
}

.wrapper{
	width: 800px;
	height: 450px;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(45,142,149,0.7);
	transition: all 0.4s ease-in-out; 
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out; 
}

.wrapper:hover{
	opacity: 1;
}

.wrapper img{
	display: block;
	position: relative;
	transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}

.wrapper:hover img{ 
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1); 
}

.wrapper h1{
	color: #2b262a;
	position: relative;
	font-size: 40px;
	margin: 15px 0;
	padding: 10px;
	text-shadow: 1px 1px #515151;
	font-family: 'Oleo Script Swash Caps', cursive;
	transform: translateX(-100px);
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	-o-transform: translateX(-100px);
	opacity: 0;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}

.wrapper p{
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #bccbd0;
	text-shadow: 1px 1px #2b262a;
	position: relative;
	padding: 10px 20px;
	transform: translateX(100px);
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-o-transform: translateX(100px);
	opacity: 0;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}

.wrapper:hover p{ 
	transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s; 
}


.wrapper a{
	display: inline-block;
	text-decoration: none;
	padding: 5px 25px;
	background: #2b262a;
	border-radius: 3px;
	border: 1px solid #1c1a1c;
	border-bottom: 3px solid #1c1a1c;
	color: #05a3d3;
	font-weight: 700;
	box-shadow: 0 0 1px #000;
	opacity: 0;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}

.wrapper:hover a{ 
	transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-o-transition-delay: 0.3s; 
}

.wrapper:hover h1,.wrapper:hover p,.wrapper:hover a{
	opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
}

.wrapper a:hover{ box-shadow: 0 0 4px #000; }

  • HTML-CSS
  • arabic css3