我想在图像上方悬停时放大铅笔。如何使用CSS顺利放大特定点？

HTML：

<div> 
</div>

CSS：

div { 
    width: 400px; 
    height: 267px; 
    border: 1px solid black; 
    background-image: url('http://i.imgur.com/n9q7jhm.jpg'); 
    background-size: 400px 267px; 
    transition: all 1s ease; 
} 

div:hover{ 
    background-size: 500px 333px; 
    background-position: -60px -60px; 
}

的jsfiddle：http://jsfiddle.net/AX59Y/

Pencil image

我天真的尝试是增加尺寸和改变图像的位置，然而正如你从jsfiddle中看到的那样因为它试图在同一时间完成两个转换，所以答案很棘手。

有没有更好的方法？

来源

2014-03-24 tgun926

试试这个http://designshack.net/tutorialexamples/imagehovers/index.html或使车速有点快http://jsfiddle.net/aamir/AX59Y/2/ –

@AamirAfridi感谢，但我已经访问过那个页面，并且他们没有放大到特定的点。即使是第一个例子，它也会放大到一个角落，而不是原点。 – tgun926

我只是简单地将缓动方法改为'缓进'而不是'缓解'，并且发现性能要好很多，你有没有试过不同的缓动方法？也许一个自定义立方贝塞尔可以进一步提高性能：http://cubic-bezier.com/ – BJack

采取从SW4的答案，改变了左侧和顶部的变化转换原点

#image { 
    background-image: url('http://i.imgur.com/n9q7jhm.jpg'); 
    background-size: 400px 267px; 
    background-position:center; 
    transition: all 1s ease; 
    width:100%; 
    height:100%; 
    transform: scale(1); 
    position:relative; 
    left:0; 
    top:0; 
    -webkit-transform-origin: 75% 75%; 
    transform-origin: 75% 75%; 
} 
#wrapper:hover #image { 
    -webkit-transform: scale(2); 
    transform: scale(2); 
}

75％75％或多或少是铅笔的位置，但您可以将其设置为任何您想要的。

fiddle

来源

2014-03-24 13:43:26 vals

谢谢，这个解决方案是完全平滑的。 – tgun926

如果你改变你的过渡到linear它看起来不太“锯齿”。

transition: all 1s linear;

不确定这是否是您想要的行为。

来源

2014-03-24 12:26:01

您可以使用过渡来放大并在悬停时重新定位图像，为了做到这一点，您需要将图像div封装在隐藏溢出的父级中。

Demo Fiddle

HTML

<div id='wrapper'> 
    <div id='image'></div> 
</div>

CSS

#wrapper { 
    width: 400px; 
    height: 267px; 
    border: 1px solid black; 
    overflow:hidden; 
    position:relative; 
} 
#image { 
    background-image: url('http://i.imgur.com/n9q7jhm.jpg'); 
    background-size: 400px 267px; 
    background-position:center; 
    transition: all 1s ease; 
    width:100%; 
    height:100%; 
    transform: scale(1); 
    position:relative; 
    left:0; 
    top:0; 
} 
#wrapper:hover #image { 
    transform: scale(2); 
    -webkit-transform: scale(2); 
    left:-150px; 
    top:-100px; 
}

来源

2014-03-24 12:26:14 SW4

对我来说，它仍然看起来像过渡试图完成两个不同的事情，每个交替之间导致锯齿状的过渡。虽然比我的实现更顺畅，但我希望能够进行更平滑的过渡。 – tgun926

很好的答案！但可以稍微做得更好:-) – vals

如何使用CSS顺利放大特定点？

回答

Demo Fiddle

相关问题