I am attempting to have a 'circular' image with a border, when the user hovers over the image the image inside is the border is scaled. Why does it appear to be glitching? can someone tell me whats going on?
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;
}
Border-radius is not an animatable property, so it doesn't scale with the image. It only gets scaled when the transition ends. http://www.w3.org/TR/css3-transitions/#properties-from-css-
If you want to maintain the border while scaling, then you can position a transparent circle with a border and box shadow (box shadow will act as the actual grey border) over the image. This way you basically have a little window showing the image.
#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;
}
Here is my fiddle: http://jsfiddle.net/a05or1uw/
You could apply the border-radius on the item that 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;
}
Check this DemoFiddle
Here's a fiddle based on user3765149's answer.
I added a border element that can be dimensioned independently of the image scaling, while the circle element acts only as a mask. It just needs a little math to adjust it correctly.
<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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.