In css3, I have this
https://codepen.io/sneaky666/pen/poyxxZY
<div id="pic">
</div>
css
#pic {
background-image:url('https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
width:200px;
height:200px;
/*background-size:cover;*/
background-position: center;
background-size:100% 100%;
transition: background-size 0.5s;
}
#pic:hover {
background-size:105% 105%;
}
And this scales the BG size from 100% to 105% which looks nice. However I want the initial size to be cover
. But if I do that, it doesn't smoothly transition from cover
to 105% 105%
. How can I still do this?
Thanks
<div id="pic"><img></div>
img gets the background and object-fit rule, then scales on hover while div has overflow:hidden; ;)img
tag, how do you usecover
?div,img {height:200px;width:200px;object-fit:cover;}