當我將鼠標懸停在圖像上時，如何使'白色邊框過渡和圖像放大'

Question

我試圖添加一個自定義懸停，就像https://ueno.co/上的項目切片一樣，在懸停時白色邊框過渡，圖像放大太。這裏是我的主頁的鏈接，它是投資組合網格我試圖改善 - http://www.david-healey.com/

Answer 1

更新2：

您可以在網站上使用下面的例子。只需將類：zoomimg添加到圖像結構即可。

.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; 
 
}

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

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>