在懸停時縮放圓形圖像

Question

我正在嘗試使用帶有邊框的“圓形”圖像，當用戶將鼠標懸停在圖像上方時，內部的圖像即為邊框縮放。 為什么似乎出現故障？ 有人可以告訴我怎么回事嗎？

HTML

 <div class="wrapper">
    <div class="portfolio-item">
        <div class="portfolio-item-preview">
            <img src="https://i.imgur.com/aLJnBtV.jpg" alt="">
        </div>
    </div>
</div>

CSS

.wrapper {
    background-color: #FFF;
    border: 1px solid #EDEDED;
    padding: 8px;
    width:200px;
    border-radius:50%;
}
.portfolio-item {
    overflow: hidden;
    border-radius:50%;
}
.portfolio-item-preview {
    position: relative;
}
img {
    max-width: 100%;
    height: auto;
}
.portfolio-item:hover .portfolio-item-preview {
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

的jsfiddle

Answer 1

邊框半徑不是可設置動畫的屬性，因此它不會隨圖像縮放。 僅在過渡結束時才進行縮放。 http://www.w3.org/TR/css3-transitions/#properties-from-css-

Answer 2

如果要在縮放時保持邊框，則可以在圖像上放置帶有邊框和框陰影（框陰影將作為實際的灰色邊框）的透明圓。 這樣，您基本上會有一個顯示圖像的小窗口。

#container{
    position:relative;
    display:inline-block;    

}

#circle{
    z-index:2;
    position:absolute;
    top:0;
    left:0;    
    border-radius:50%;
    height:200px;
    width:200px;
    border:20px solid white;
    box-shadow:0 0 2px #666;
}
img {
    border-radius:50%;
    width:200px;
    z-index:1;
    position:absolute;
    top:20px;
    left:20px;  
}
#container:hover img{
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

這是我的小提琴： http : //jsfiddle.net/a05or1uw/

Answer 3

您可以將border-radius應用於可scale的項目：

.portfolio-item-preview {
    overflow: hidden;
    border-radius:50%;
    position: relative;
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

檢查此DemoFiddle

Answer 4

這是基於user3765149的答案的小提琴。

我添加了一個邊框元素，該邊框元素的大小可以與圖像縮放比例無關，而圓形元素僅充當蒙版。 它只需要一點數學就可以正確調整它。

<div id="container">
    <div id="border"> </div>
    <div id="circle"> </div>
    <img src="https://i.imgur.com/aLJnBtV.jpg" alt=""/>
</div>            

CSS：

#container{
    position:relative;
    display:inline-block;    
}
#border{
    z-index:3;  
    position:absolute;
    top:6px;
    left:6px;
    border-radius:50%;
    height:206px;
    width:206px;
    border:1px solid #dedede;    
}
#circle{
    z-index:2;
    position:absolute;
    top:0;
    left:0;    
    border-radius:50%;
    height:200px;
    width:200px;
    border:10px solid white;
}
img {
    z-index:1;
    border-radius:50%;
    width:200px;
    position:absolute;
    top:10px;
    left:10px; 
    transform: scale(1);
    transition: all 0.15s ease-out 0s;
}
#container:hover img{
    transform: scale(1.08);
    transition: all 0.15s ease-out 0s;
}

http://jsfiddle.net/isaacalves/dwpy4sm7/2/

Answer 5

在CSS中添加“作品集項目”：

translateZ(0);

我做了一些更改： JsFiddle

:)