هنا

[مايكل]

مرحبا ... صباح الخير


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

كود css

<style type="text/css">



.loder{
   padding: 5px;
   width: 40px;
   height: 40px;
   margin: 3px;
   transition:2s;
   z-index: 2;
   display: inline-block;
   border-radius: 50%;
}


.loder:hover{
  height: 90px;
  width: 90px;
}


img:hover{
  height: 90px;
  width: 90px;
  transition:2s;


}




img {
  transition:2s;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
}


#domain{
  
  z-index:8;
}


</style>

<div id="doraraliraq">
      <div class="loder"><a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRs5Gh8h4u0N3a9ZCWY5cmIa7X9_yH48  K2r8j_x5IusaGwwRfCL" title="يوتيوب"></a></div>      <div class="loder"><a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbJcM4Q8rT4jU5ZTGxLu4pW69jknVHq  cdPEoRNJxbC9rAh8E4z" title="فيسبوك"></a></div>      <div class="loder"><a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQACFFKof6vf7PpNAAPvqgL0A2jRhSLC  ynDnmABW58wY2F6VgMK" title="تويتر"></a></div>      <div class="loder"><a href=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQosttqJpoScxDnVRrrq9KoeNU3tDVmM  CI5Hjb4EA5I6BMqWth9" title="انستاكرام"></a></div>      <div class="loder"><a href=""><img src="https://www.swishschool.com/w/wp-content/uploads/2017/12/whatsapp.png" title="واتساب"></a></div>      <div class="loder"><a href=""><img src="https://1.bp.blogspot.com/-oTNUQtG5vqk/WgxFXBjzM3I/AAAAAAAAYsY/qOYUVuSTvgEkwM2enEYOpZYVpFKMTrfVACEwYBhgL/s1600/G%252B%2Bgoogleplus.png" title="كوكل بلاس"></a></div>   
   </div>

واليكم فيديو يوضح الشرح اعلاه

[ود 'ے]

شكرا

[Levai]

شكرا صديقي

[رمـْـْْـْــــــــآڊ]

جميل ... استمر

[صرخـات الرّحيـل]

أخي أكو خطأ بكود css لأن هذا الكود مدا يكبر بس أيقونات التواصل الأجتماعي يكبر حتى ايقونات المنتدى والموقع أيضا المواقع يرجى التعديل على الكود
تحياتي : مؤمل الحسيني

[جودي']

سلمت

[مايكل]

أخي أكو خطأ بكود css لأن هذا الكود مدا يكبر بس أيقونات التواصل الأجتماعي يكبر حتى ايقونات المنتدى والموقع أيضا المواقع يرجى التعديل على الكود
تحياتي : مؤمل الحسيني

ملاحظة جيدة شكرا لك عليها لاسف لم يسمح لي المنتدى بتعديل مشاركتي
انتظرت ردا عليها ...


نعم الخطا في الكود التالي :

img:hover{
height: 90px;
width: 90px;
transition:2s;
}

لان hover يستهدف img فان كل img سيكبر
قم بتغيير img بـ اي اسم مثل #at:hover وبعدها ضع الاسم في كود html
فيصبح الكود لـ css بالشكل التالي

<style type="text/css">






.loder{
   padding: 5px;
   width: 40px;
   height: 40px;
   margin: 3px;
   transition:2s;
   z-index: 2;
   display: inline-block;
   border-radius: 50%;
}




.loder:hover{
  height: 90px;
  width: 90px;
}




 #at:hover{
  height: 90px;
  width: 90px;
  transition:2s;




}




#at {
  transition:2s;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
}


#domain{
  
  z-index:8;
}


</style>

اما كود html

<div id="doraraliraq">      <div class="loder"><a href=""><img id="at" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRs5Gh8h4u0N3a9ZCWY5cmIa7X9_yH48  K2r8j_x5IusaGwwRfCL" title="يوتيوب"></a></div>      <div class="loder"><a href=""><img id="at" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbJcM4Q8rT4jU5ZTGxLu4pW69jknVHq  cdPEoRNJxbC9rAh8E4z" title="فيسبوك"></a></div>      <div class="loder"><a href=""><img id="at" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQACFFKof6vf7PpNAAPvqgL0A2jRhSLC  ynDnmABW58wY2F6VgMK" title="تويتر"></a></div>      <div class="loder"><a href=""><img id="at" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQosttqJpoScxDnVRrrq9KoeNU3tDVmM  CI5Hjb4EA5I6BMqWth9" title="انستاكرام"></a></div>      <div class="loder"><a href=""><img id="at" src="https://www.swishschool.com/w/wp-content/uploads/2017/12/whatsapp.png" title="واتساب"></a></div>      <div class="loder"><a href=""><img id="at" src="https://1.bp.blogspot.com/-oTNUQtG5vqk/WgxFXBjzM3I/AAAAAAAAYsY/qOYUVuSTvgEkwM2enEYOpZYVpFKMTrfVACEwYBhgL/s1600/G%252B%2Bgoogleplus.png" title="كوكل بلاس"></a></div>      </div>

[مايكل]

شكرا لمن حضر في هذا الموضوع