السبت، 28 مارس 2015

صناديق مع 7 تأثيرات Hover احترافية


السلام عليكم ورحمة الله وبركاته أهلا بكم أحبتي في هذا الدرس الجديد على مدونة مطورون اليوم سأقدم لكم صناديق بتأثيرات hover رائعة جدا باستخدام الـ CSS و HTML5 و JS بحيث ستكون هناك 7 تأثيرات مختلفة ومميزة ستضيف جمالية على موقعكم أو مدونتكم كما في مدونة مطورون بحيث ستجدون هذه الإضافة اسفل المواضيع في الصفحة الرئيسية لمدونتنا.

طريقة التركيب :
1- بعد دخولك إلى القالب ابحث عن <head> وأضف أسفله الكود التالي :
<script src='https://dl.dropboxusercontent.com/u/280199022/toucheffects.js' type='text/javascript'/>
2- ابحث عن </body> وأضف فوقه الكود التالي :
<script src='https://dl.dropboxusercontent.com/u/280199022/modernizr.custom.js' type='text/javascript'/>
3- ابحث عن */]]></b:skin> أضف فوقه الكود التالي :
.grid {
 padding: 20px 20px 100px 20px;
 max-width: 1300px;
 margin: 0 auto;
 list-style: none;
 text-align: center;
  font-family: 'lolblogger';
  font-size: 20px;
}

.grid li {
 display: inline-block;
 width: 440px;
 margin: 0;
 padding: 20px;
 text-align: left;
 position: relative;
}

.grid figure {
 margin: 0;
 position: relative;
}

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

.grid figcaption {
 position:absolute;
 top: 0;
 left: 0;
 padding: 20px;
 background: #2c3f52;
 color: #ed4e6e;
}

.grid figcaption h3 {
 margin: 0;
 padding: 0;
 color: #fff;
}

.grid figcaption a {
 text-align: center;
 padding: 5px 10px;
 border-radius: 2px;
 display: inline-block;
 background: #ed4e6e;
 color: #fff;
    text-decoration:none;
  outline:none;
}

/* Individual Caption Styles */

/* Caption Style 1 */
.cs-style-1 figcaption {
 height: 100%;
 width: 100%;
 opacity: 0;
 text-align: center;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 -moz-transition: -moz-transform 0.3s, opacity 0.3s;
 transition: transform 0.3s, opacity 0.3s;
}

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
 opacity: 1;
 -webkit-transform: translate(15px, 15px);
 -moz-transform: translate(15px, 15px);
 -ms-transform: translate(15px, 15px);
 transform: translate(15px, 15px);
}

.cs-style-1 figcaption h3 {
 margin-top: 70px;
}

.cs-style-1 figcaption span {
 display: block;
}

.cs-style-1 figcaption a {
 margin-top: 30px;
}

/* Caption Style 2 */
.cs-style-2 figure img {
 z-index: 10;
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
 -webkit-transform: translateY(-90px);
 -moz-transform: translateY(-90px);
 -ms-transform: translateY(-90px);
 transform: translateY(-90px);
}

.cs-style-2 figcaption {
 height: 90px;
 width: 100%;
 top: auto;
 bottom: 0;
}

.cs-style-2 figcaption a {
 position: absolute;
 right: 20px;
 top: 30px;
}

/* Caption Style 3 */
.cs-style-3 figure {
 overflow: hidden;
}

.cs-style-3 figure img {
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
 -webkit-transform: translateY(-50px);
 -moz-transform: translateY(-50px);
 -ms-transform: translateY(-50px);
 transform: translateY(-50px);
}

.cs-style-3 figcaption {
 height: 100px;
 width: 100%;
 top: auto;
 bottom: 0;
 opacity: 0;
 -webkit-transform: translateY(100%);
 -moz-transform: translateY(100%);
 -ms-transform: translateY(100%);
 transform: translateY(100%);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
 transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
 opacity: 1;
 -webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
 -ms-transform: translateY(0px);
 transform: translateY(0px);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s;
 transition: transform 0.4s, opacity 0.1s;
}

.cs-style-3 figcaption a {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

/* Caption Style 4 */
.cs-style-4 li {
 -webkit-perspective: 1700px;
 -moz-perspective: 1700px;
 perspective: 1700px;
 -webkit-perspective-origin: 0 50%;
 -moz-perspective-origin: 0 50%;
 perspective-origin: 0 50%;
}

.cs-style-4 figure {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.cs-style-4 figure > div {
 overflow: hidden;
}

.cs-style-4 figure img {
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
 -webkit-transform: translateX(25%);
 -moz-transform: translateX(25%);
 -ms-transform: translateX(25%);
 transform: translateX(25%);
}

.cs-style-4 figcaption {
 height: 100%;
 width: 50%;
 opacity: 0;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform-origin: 0 0;
 -moz-transform-origin: 0 0;
 transform-origin: 0 0;
 -webkit-transform: rotateY(-90deg);
 -moz-transform: rotateY(-90deg);
 transform: rotateY(-90deg);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
 transition: transform 0.4s, opacity 0.1s 0.3s;
}

.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
 opacity: 1;
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 transform: rotateY(0deg);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s;
 transition: transform 0.4s, opacity 0.1s;
}

.cs-style-4 figcaption a {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

/* Caption Style 5 */
.cs-style-5 figure img {
 z-index: 10;
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.no-touch .cs-style-5 figure:hover img,
.cs-style-5 figure.cs-hover img {
 -webkit-transform: scale(0.4);
 -moz-transform: scale(0.4);
 -ms-transform: scale(0.4);
 transform: scale(0.4);
}

.cs-style-5 figcaption {
 height: 100%;
 width: 100%;
 opacity: 0;
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 -ms-transform: scale(0.7);
 transform: scale(0.7);
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
 -moz-transition: -moz-transform 0.4s, opacity 0.4s;
 transition: transform 0.4s, opacity 0.4s;
}

.no-touch .cs-style-5 figure:hover figcaption,
.cs-style-5 figure.cs-hover figcaption {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

.cs-style-5 figure a {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

/* Caption Style 6 */
.cs-style-6 figure img {
 z-index: 10;
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.no-touch .cs-style-6 figure:hover img,
.cs-style-6 figure.cs-hover img {
 -webkit-transform: translateY(-50px) scale(0.5);
 -moz-transform: translateY(-50px) scale(0.5);
 -ms-transform: translateY(-50px) scale(0.5);
 transform: translateY(-50px) scale(0.5);
}

.cs-style-6 figcaption {
 height: 100%;
 width: 100%;
}

.cs-style-6 figcaption h3 {
 margin-top: 60%;
}

.cs-style-6 figcaption a {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

/* Caption Style 7 */
.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }

.cs-style-7 figure img {
 z-index: 10;
}

.cs-style-7 figcaption {
 height: 100%;
 width: 100%;
 opacity: 0;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
 -moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
 transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
 box-shadow: 0 0 0 0px #2c3f52;
}

.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
 opacity: 1;
 height: 130%;
 box-shadow: 0 0 0 10px #2c3f52;
}

.cs-style-7 figcaption h3 {
 margin-top: 86%;
}

.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
 opacity: 0;
 -webkit-transition: opacity 0s;
 -moz-transition: opacity 0s;
 transition: opacity 0s;
}

.cs-style-7 figcaption a {
 position: absolute;
 bottom: 20px;
 right: 20px;
}

.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
 -webkit-transition: opacity 0.3s 0.2s;
 -moz-transition: opacity 0.3s 0.2s;
 transition: opacity 0.3s 0.2s;
 opacity: 1;
}

@media screen and (max-width: 31.5em) {
 .grid {
  padding: 10px 10px 100px 10px;
 }
 .grid li {
  width: 100%;
  min-width: 300px;
 }
}
4- اختر التأثير الذي يعجبك  من بين هذه التأثيرات وقم بأخد كود HTML الخاص به من صندوق المعاينة وضع في المكان الذي تريد داخل القالب :
التأثير الأول :

التأثير الثاني :

التأثير الثالث :
التأثير الرابع :
التأثير الخامس :
التأثير السادس :
التأثير السابع :
لا تنسى التعديل على العبارات والألوان بما يناسبك, كما أنه لا بد إلى الإشارة لضرورة تنسيق هذه الصناديق لكي تناسب موقعكم

كنتم مع درس لإضافة صناديق مع تأثيرات hover احترافية لموقعكم أو مدونتكم أي استفسار ضعوه في تعليق نلتقي مع درس جديد قريبا
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)