كود بنرات دائرية بتقنية css - زوم على البنر

 من طرف زائر في الخميس يناير 21, 2016 8:21 am

كود بنرات دائرية بتقنية css - زوم على البنر

صورة للبنر


https://i.servimg.com/u/f68/16/46/77/76/1437-010.gif

الكود:

<style>
.gridcontainer {
   width: 720px;
   margin: 30px auto;
}

.grid_3 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

.fmcircle_out {
   width: 200px;
   height: 200px;
   background: rgba(221,221,221,0.3)
   text-align: center;
   display: block;
   margin-left: 10px;
   opacity: 0.5;   
   
   border-radius: 100px;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
   -o-border-radius: 100px;
   
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

   .fmcircle_out:hover {
      opacity: 1;   
      
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      transition: all 0.2s linear;
   }
   
   .fmcircle_out:hover .fmcircle_in img {
      margin: 30px 25px 25px 25px;
      width: 120px;
      height: 120px;
      
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      transition: all 0.2s linear;
   }
   


.fmcircle_in {
   width: 170px;
   height: 170px;
   margin: 15px;
   display: inline-block;
   overflow: hidden;
   
   border-radius: 85px;
   -moz-border-radius: 85px;
   -webkit-border-radius: 85px;
   -o-border-radius: 85px;
}

.fmcircle_in img {
   border: none;
   margin: 53px;
   width: 64px;
   height: 64px;
      
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.fmcircle_in span {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
   width: 160px;
   background: #fff;
   color: #666666;
   padding: 5px;
   margin: 70px 0 0 0;
   height: 20px;
   text-align: center;
   font-weight: bold;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   float: left;
   position: absolute;
   opacity: 0;
   
   border-radius: 2px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   -o-border-radius: 2px;
      
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

   .fmcircle_out:hover .fmcircle_in span {
      opacity: 1;
      
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      transition: all 0.2s linear;
   }

/*** Patterns ***/

.fmcircle_blue {
   background: url(http://i68.servimg.com/u/f68/16/46/77/76/138.png);
}

.fmcircle_red {
   background: url(http://i68.servimg.com/u/f68/16/46/77/76/239.png);
}

.fmcircle_green {
   background: url(http://i68.servimg.com/u/f68/16/46/77/76/331.png);
}

</style>
<div class="gridcontainer clearfix">
              
   <div class="grid_3">
                 
      <div class="fmcircle_out">
               <a href="#"> </a>     
         <div class="fmcircle_border">
                       
            <div class="fmcircle_in fmcircle_blue">
                     <span>بنر رقم 1</span><img src="http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo63.png" />     
            </div>
                       
         </div><a href="#"> </a>     
      </div>
                 
   </div>
              
   <div class="grid_3">
                 
      <div class="fmcircle_out">
               <a href="#"> </a>     
         <div class="fmcircle_border">
                       
            <div class="fmcircle_in fmcircle_green">
                     <span>بنر 2</span><img src="http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo63.png" />     
            </div>
                       
         </div><a href="#"> </a>     
      </div>
                 
   </div>
              
   <div class="grid_3">
                 
      <div class="fmcircle_out">
               <a href="#"> </a>     
         <div class="fmcircle_border">
                       
            <div class="fmcircle_in fmcircle_red">
                     <span>بنر 3</span><img src="http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo63.png" />     
            </div>
                       
         </div><a href="#"> </a>     
      </div>
                 
   </div>
</div>

 من طرف الجنوب العربي في الخميس يناير 21, 2016 8:32 am

ماشاالله 

والله انك مبدعه 

اعجبنا اسلوب الزوم كتييييرر

سلمت اناملك ادارة

تم التقييييم

التوقيع

"سُبْحَانَ اللَّهِ وَبِحَمْدِهِ سُبْحَانَ اللَّهِ الْعَظِيمِ"

 

 من طرف THE ROCK في الخميس يناير 21, 2016 3:28 pm

كود وتطوير رائعه

يعطيك العافيه وتسلم الأيادي المتألقه

على روعة ماخطت لنا من ابجديات واكواد ماسيه

بإنتظار روائعك القادمه بشوووق

التوقيع

 من طرف زائر في الخميس يناير 21, 2016 4:30 pm

منورين .. ♥

 من طرف Abshahad في الأحد فبراير 07, 2016 6:34 am

يعطيك العآفيه يا الغلا
طرح بقمة الذوووق والرووعهـ
تسلم يدك ع الطرح المميز لاعدمنـآك ,...
بانتظارجديدك بكل شوق ودي وشذى وردي

التوقيع

 لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط
 من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف ѕαα∂ ∂єѕιgη في الأحد فبراير 07, 2016 5:50 pm

كوددد جميل
شكككرآ ~

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط

من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف Robbie Rotten في الأحد فبراير 07, 2016 6:12 pm

كوددد جميل
شكككرآ   ~

التوقيع

سبحان الله وبحمده ..

          سبحان الله العظيم ...

اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين

 لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط
 من هنا لطلب الالتحاق بفريق منتدانا الحبيب

 من طرف زائر في الثلاثاء مايو 17, 2016 8:12 pm

السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي

 من طرف زائر في السبت أغسطس 27, 2016 6:04 pm

كود جمييل شكرا لك

 من طرف زائر في السبت أغسطس 27, 2016 10:25 pm

منور الموضوع