bloggerarchive
247125322047940
تحميل

اضافة تأثير مدهش جدا على الصور بالى CSS and HTML



http://i.imgur.com/pP5xvAE.jpg
السلام عليكم ورحمة الله وبركاته.
اقدم لكم في هذا الموضوع كيفية اضافة تأثير جميل على الصوره 

كمت ترا اعلاه فإن الصوره عند تحريك المؤشر فوقها تتحول زرقاء ويظهر الاعنوان و

 اسم صاحب التدوينيه و ايضا الرابطاستخدام هذه الاضافة لعرض المواضيع للزوار بشكل جميل و جذاب

و ايضا هي اضافه جميله لاي قالب بلوجر ولها العديد الاستخدامات المختلفه  تم ترجمة الموضوع من
فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.
  1. اذهب للوحة تحكم مدونتك .
  2. القالب.
  3. تحرير HTML'
  4. متابعه و اشر على توسيع القوالب.
  5. اضغط Ctrl+F من لوحة المفاتيح.
  6. ابحث عن الوسم التالي:
  ]]></b:skin>
7. قم بلصق الكود التالي فوقه مباشره:
/* Bloggertrix  */
.Btrix-item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
    position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
    height: 150px;
    border-radius: 50%;}
.Btrix-info-wrap {
    background: #07CFE0 url(../images/bg.jpg);
    box-shadow:
        0 0 0 20px rgba(255,255,255,0.2),
        inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
    display: block;position: absolute;width: 150px;height: 150px;
    border-radius: 50%;
    background-position: center center; 
    -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
    opacity: 0;background: #07CFE0;pointer-events: none;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out 0.2s;
    -moz-transition: all 0.4s ease-in-out 0.2s;
    -o-transition: all 0.4s ease-in-out 0.2s;
    -ms-transition: all 0.4s ease-in-out 0.2s;
    transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
    background-image: url(http://2.bp.blogspot.com/-4XCvJshy9x8/UIDjlYZiXDI/AAAAAAAAFQY/ttkRA-S1f6g/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
    background-image: url(http://2.bp.blogspot.com/-Jb6h8JyvgY0/UIDkIf-Qz6I/AAAAAAAAFQg/mkh-ENaD86c/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
    background-image: url(http://3.bp.blogspot.com/-Ll04NZIOfmk/UIDkJV5vrtI/AAAAAAAAFQo/fYqC8FW7g7U/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
    color: #fff;
    text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
    padding: 40px 0 0 0;
    height: 80px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow:
        0 0 1px #fff,
        0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
    color: #fff;
    padding: 10px 5px 0;
    font-style: italic;
    margin: -60px 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
    display: block;color: #e7615e;font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
    color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;}
.Btrix-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
    content: '';
    display: table;}
.Btrix-grid:after {
    clear: both;}
.Btrix-grid li {
    width: 150px;
    height: 150px;
    display: inline-block;
    margin: 4px;
}
 عدل الروابط الحمر بروابط الصور التي تريد استخدامها.
 8. اضغط حفظ.
9.اذهب إلى تخطيط .
10. اضف اداة HTML/Javascript' و الصق الكود التالي بداخلها  ثم حفظ.
<section class="main">
            
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Fashion</h3>
الكاتب: تعديل <a href="http://www.blogger-archive.com"><br/>اضغط هنا</a><br />
</div></div></div></div></li>

<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Nature</h3>
الكاتب: تعديل<a href="http://www.blogger-archive.com"><br/>اضغط هنا</a><br />
</div></div></div></div></li>

<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Car</h3>
الكاتب: تعديل  <a href="http://www.blogger-archive.com"><br/>اضغط هنا</a><br />
</div></div></div></div></li></ul></section>
عدل الرابط الاحمر برابط الدوينيه و الكتابه الزرقاء بأسم صاحب التدوينيه.
واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.
تحياتي.



ما رأيك: 
تأثيرات على الصور 7479198135989538830

إرسال تعليق تعليقات الموقع

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!