如何在图像图标上设置鼠标效果

debugcn 发表于 Dev

Toufa Tabassum

我正在尝试在此链接的发现字段中执行与此“联系我们”按钮相同的鼠标效果。但我不能做同样的系统，标题不能在按钮的右侧对齐。任何人都可以帮我做与list一样的Discover部分吗？[link][1]

    <div>
   <a href="#">
   <figure> <img src="http://demo.mofizagrofood.com/wp-content/uploads/2018/11/ph2.png" alt="image"> </figure>

  </a> 
  <h2>
  Contact Us 
  </h2>
  </div>

figure{
    display:block;
    width:80px;
    height: 80px;
    border-radius: 50px;
    font-size: 40px;
    text-align: center;
    margin-right: 10px;
    background: #fff;
    line-height: 1.7em;
}

figure img{
   display:inline-block;
   width: 60px;
   height: auto;
}

演示链接

索希杜尔

'transform: translateY' 使图像上下滑动。'display: flex' 在 parent 上使其子项从左到右对齐。试试这个。https://codepen.io/hridoy569/pen/WYPXNj

<div class="box">
   <a href="#" >
   <figure> 
     <img class="img1" src="" alt="image1"> 
     <img class="img2" src="" alt="image2"> 
   </figure>
  </a> 
  <h2> Contact Us  </h2>
</div>


body{
  background: White;
}

.box{
  width: 350px;
  height: 80px;
  background: #f5f5f5;
  display: flex;
  overflow: hidden;
}
.box h2{

}

figure{
    width:80px;
    height: 80px;
    border-radius: 50px;
    font-size: 20px;
    text-align: center;
    margin: 0 10px 0 10px;
    background: #ccc;
}

figure img{
   width: 80px;
   height: 80px;
}

.box:hover .img1{
              transform: translateY(-100%);
            transition: transform 0.6s ease;
}

.box:not( :hover ) .img1{ 
              transform: translateY(0%);
            transition: transform 0.6s ease;
}
.box:hover .img2{
              transform: translateY(-100%);
            transition: transform 0.6s ease;
}

.box:not( :hover ) .img2{ 
              transform: translateY(0%);
            transition: transform 0.6s ease;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。