Question

当我将鼠标悬停在图像上时，我将其设置为显示边框半径，因为我有一个背景图像，而且你无法使边框半径透明，我将其删除了，这导致了一个很酷但却意外的效果。当您将鼠标悬停在图像上以显示半径并添加填充时，它会向下推动页面的其余部分。

无论如何，我可以将效果保持在页面的某个部分，以便将文本和内容框向下移动，但是阻止它将整个页面向下推。这是我的代码，但为了得到一个真实的例子，有一个站点链接，谢谢！

.service img#dev:hover{
border: 3px solid #76c2af;
border: 3px solid #76c2af;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius: 80px;
padding:10px;
transition: all 0.5s ease-in-out 0s;
}

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 service" style="text-align:center;">
    <img id="dev" src="assets/imgs/dev.png">
    <div class="serviceDescription">
        <h3 class="service-title">Hand Crafted</h3>
        <p class="service-description">
                    All of my projects are hand crafted and utilize the latest in web technology. My work boasts a clean & compliant markup and you are rewarded with unquestionable level of perfection.
        </p>
    </div>
</div>

Live preview here

Answer 1

例如

.service img{
  border: 3px solid transparent;
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  border-radius: 80px;
  padding:10px;
  transition: all 0.5s ease-in-out 0s;
}

休息还可以：）

关于悬停推送内容

1 个答案: