الخط رهيبة رمز تحوم تأثير من أعلى إلى أسفل

Question

أنا باستخدام الخط إيوسم للرموز الاجتماعية بلدي ، والعمل مع بوتستراب 3.

أريد تأثير تحوم مثل هذا واحد على الجزء السفلي: مثال

لدي قائمة للرموز الاجتماعية الخاصة بي :

<ul class="social-buttons">
    <li class="youtube"><a href="#" title="Follow us on Youtube"><i class="fa fa-youtube fa-lg"></i></a></li>
    <li class="twitter"><a href="#" title="Follow us on Twitter"><i class="fa fa-twitter fa-lg"></i></a></li>
    <li class="xing"><a href="#" title="Follow us on Xing"><i class="fa fa-xing fa-lg"></i></a></li>
    <li class="rss"><a href="#" title="Check out our RSS"><i class="fa fa-rss fa-lg"></i></a></li>
</ul>

لبلدي المغلق لدي هذا:

.social-buttons {
  position: absolute;
  left: 70%;
  top: 6px;
}

.social-buttons li {
  list-style-type: none;
  float: left;
  margin: 9px 9px 9px 9px;
  position: relative;
}

.social-buttons li a {
  padding: 2px 2px 2px 2px;
  display: block;
}

.social-buttons-footer {
  position: relative;
  left: -49px;
}

.social-buttons-footer li {
  list-style-type: none;
  float: left;
  margin: 8px 8px 8px 8px;
}

.social-buttons-footer li a {
  padding: 2px 2px 2px 2px;
  display: block;
}

.fa-youtube, .fa-twitter, .fa-xing, .fa-rss {
  color: #000000;
}
.fa-lg:hover{
  color: #ffffff;
}

.fa-2x{
  color: #000000;
}
.fa-2x:hover{
  color: #ffffff;
}


// Hover Effect ---------------------------------------------------------------------------------------------------------------------------------------------
.youtube a:hover{
  background-color: #db2c2c;
  -webkit-animation: toBottomFromTop 0.3s;
  -moz-animation: toBottomFromTop 0.3s;
  animation: toBottomFromTop 0.3s;
  color: #ffffff;
}

.twitter a:hover{
  background-color: #83d0f5;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.xing a:hover{
  background-color: #a2d123;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.rss a:hover{
  background-color: #fe9c01;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

لقد بحثت جوجل الساعات القليلة الماضية ، وأنا يمكن أن تجد سوى أمثلة حيث أنها تستخدم العفاريت أو أي شيء من هذا القبيل.لا أعرف حقا كيف أفعل ذلك.أين يجب أن أضع الرمز الذي يجب تبادله عند التمرير ?أنا أعرف كيفية القيام بذلك مع العفاريت - هناك يمكنني استخدام الموقف.ولكن كيف يمكنني استخدامه هنا?حاولت شيئا آخر لتحوم يوتيوب:لكن هذا يبدو وكأنه خطأ كبير!يمكن لشخص يعلمني أو يقول لي أين تجد توت?سيكون لطيفا.

Answer 1

لدي بناء التأثير الذي تحتاجه هنا على جسفيدل.

عليك فقط إضافة عناصر أوسوميفونت الخاصة بك الآن.

لقد أضفت overflow: hidden; إلى الوالدين ونقل العناصر الفردية مع margin: -x px 0 0 0 في حدث تحوم.