Question

我正在尝试添加自定义悬停，就像https://ueno.co/上的项目图块一样，悬停时白色边框会向上移动，图像也会放大。这是我的主页的链接，它是我正在努力改进的投资组合网格 - http://www.david-healey.com/

Answer 1

更新2：

您可以在您的网站上使用以下示例。只需将Class：zoomimg添加到图像结构中即可。

＆＃13;

.menu{
  text-align:center;
}

.zoomimg {
    display: inline-block;
    width: 200px;
    height: 200px;
    padding: 0px 5px 0px 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .5s ease;
    position: relative;
}
.zoomimg:hover {
    cursor: pointer;
    background-size: 150% 150%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    height: 150.797px;
    width: 150.984px;
}
.blog {
     background-image: url(http://www.david-healey.com/wp-content/uploads/2016/11/ST_Project_Thumb_570%C3%97587.jpg);
    display: block; 
    top: 65.0938px;
    overflow: hidden;
}

＆＃13;

<div id="menu">
    <div class="blog zoomimg"></div>
</div>

＆＃13;

Answer 2

您只需缩放img并向下缩放.thumb-inner。

.thumb-inner {
  overflow: hidden;
}

.thumb-inner,
.thumb-inner img {
  transition: transform .3s ease-in-out;
}

  .thumb-inner:hover {
    transform: scale(.97);
  }

  .thumb-inner img:hover {
    transform: scale(1.1);
  }

<a href="#">
  <div class="thumb-inner">
    <img src="http://res.cloudinary.com/dvjpaoffl/image/upload/v1486268758/sample.jpg">
  </div>
</a>

将鼠标悬停在图像上时，如何进行“白色边框过渡和图像放大”

2 个答案: