3D Thumbnail Hover Effects تأثير

3D Thumbnail Hover Effects
طريقة عمل تاثير ثريدي على مصغرات الصور من المؤثرات الجميلة التي تعطي رونق وشكل متميز لموقع وهي احدى الطرق الحديثة المستخدمة حالياً في تصميم المواقع فهي تعكس انطباع جميل للمستخدم للبقاء اكبر فترة ممكنة في موقعك وبطبيعة الحال تغنيك من استخدم الجافا سكربت ولكن ويجب ان تكون على دراية بطريقة كتابة ملف الاستايل على الاقل

arabic.responsive.css ملاحضة : تم تضميين

Download Now
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
body{
	background-image:url(images/bg.png);}
.container{
	max-width:1200px;
	
}

header{
	margin:50px 0;	
	}
h1{
	font-weight:bold;
	font-size:35px;
	color:#e86645;
	text-align:center;
	font-family: 'Lobster', cursive;
	text-shadow: 1px 1px 1px #413659;
	}
a,p{	
	font-family: 'Droid Arabic Kufi', serif;
	font-size:13px;
	font-weight:400;
	text-align:justify;
	padding:0 10px;
	
}

a{
	text-decoration:none;
	outline:none;
	font-weight:bold;
	font-size:14;
	color:rgba(228,77,38,1);
	
	}
a:hover{
	color:rgba(228,77,38,.7);
}

.rollover {
    position: relative;    
}
.front {
    z-index: 2;
    position: absolute;
}

.rollover:hover .back, 
.rollover:focus .back {
    z-index: 2;
}
.rollover:hover .front, 
.rollover:focus .front {
    z-index: 1;
}
.fade .rollover .front {
    opacity: 1;
    -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover .back {
    opacity: 0;
    -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.fade .rollover:hover .front, 
.fade .rollover:focus .front {
    opacity: 0;
}
.fade .rollover:hover .back, 
.fade .rollover:focus .back {
    opacity: 1;
}
.flip .rollover {
    -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
.flip .cube {
    -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
     -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
      -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
       -o-transform: rotateX(0) rotateY(0) rotateZ(0);
          transform: rotateX(0) rotateY(0) rotateZ(0);
    -webkit-transition: 1s;
     -moz-transition: 1s;
      -ms-transition: 1s;
       -o-transition: 1s;
          transition: 1s;
}
.flip .front {
    -webkit-transform: translate3d(0,0,1px);
     -moz-transform: translate3d(0,0,1px);
      -ms-transform: translate3d(0,0,1px);
       -o-transform: translate3d(0,0,1px);
          transform: translate3d(0,0,1px);
}
.flip .back {
    -webkit-transform: rotateY(180deg) translate3d(0,0,0);
     -moz-transform: rotateY(180deg) translate3d(0,0,0);
      -ms-transform: rotateY(180deg) translate3d(0,0,0);
       -o-transform: rotateY(180deg) translate3d(0,0,0);
          transform: rotateY(180deg) translate3d(0,0,0);
}
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {
    -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg); 
      -ms-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.box .front {
    -webkit-transform: translate3d(0,0,80px) scale(0.9,0.9);
     -moz-transform: translate3d(0,0,80px) scale(0.85,0.85);
      -ms-transform: translate3d(0,0,80px) scale(0.85,0.85);
       -o-transform: translate3d(0,0,80px) scale(0.85,0.85);
          transform: translate3d(0,0,80px) scale(0.85,0.85);
}
.box .back {
    -webkit-transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.9,0.9);
     -moz-transform: rotateY(180deg) translate3d(0,0,80px) scale(0.85,0.85);
      -ms-transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.85,0.85);
       -o-transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.85,0.85);
          transform: rotateY(180deg) translate3d(0,0,80px)  scale(0.85,0.85);
}

  • HTML-CSS
  • html-css تصميم موقع كامل