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

السلام عليكم ورحمة الله وبركاته.

اقدم لكم في هذا الموضوع كيفية اضافة تأثير جميل على الصوره 

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

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

و ايضا هي اضافه جميله لاي قالب بلوجر ولها العديد الاستخدامات المختلفه  تم ترجمة الموضوع من

 قِبل مدونة ارشيف بلوجر ,المصدر  
 

فارجو ان تنال الاضافة اعجابكم الان مع كيفية التركيب.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizxa6KDlH38cWnKN57fT5h9wcw6JIIKze98swFOe33HIPN3RPV88REUB5ZX1Yp5CxGRK4pu5MtwpDUUzMszRVPTFJVfxk8Irn-ocKxc9q64ry2oVLER10B_5sxUrvTWbu4faxE5JO3R7Y/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh89boGeLIyfBcty-65IAR1R4YgbARYaZKRgOOTUSDjTL6HVqyHrsIhrE8fJmpBzfrIKps93V5kdSJlt7zlEsOaw_56N_jzJtB8N_aWgE6JdTJkLqJkOPrQ56S1E7zUkZWTT0v1o7ryY24/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6tXhJdDA4H5uNyRZ9VOLpxBx5o_q0eJUYeE1Fc714DAaGubjf0QyW73fFg4TKvmgn_o9a-w_A5ss3pIR7Lk5QDqftNFMVCyuHYS_aH95zAk5d9NDuqDcYfFlojIJSacYVnv-0rcdiMiE/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>

عدل الرابط الاحمر برابط الدوينيه و الكتابه الزرقاء بأسم صاحب التدوينيه.

واي استفسار يمكنك وضعه في تعليق في هذه التدوينيه وسيتم الرد عليه في اقرب وقت ممكن.

تحياتي.