html - 悬停时缩放位置

标签 html css hover zooming

我想在点击图像时更改悬停图像的位置。现在*图像悬停在底部放大,我想在顶部放大(参见图像链接)。 我已经添加了这段代码:

HTML:

<div class="image"></div>

CSS:

.image { background:url(image url); height:50px; width:50px; }

.image:hover { background:url( image url ); height:400px; width:400px; }

图片:

最佳答案

试试这个

 .image:hover {
cursor: pointer;
height:400px;
width: 400px;
transform:scale(1.5);
-ms-transform:scale(1.5); /* IE 9 */
-moz-transform:scale(1.5); /* Firefox */
-webkit-transform:scale(1.5); /* Safari and Chrome */
-o-transform:scale(1.5); /* Opera */
}

它有效..

关于html - 悬停时缩放位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21775817/

相关文章:

html - 如何固定单选按钮的宽度

javascript - css 和 javascript 文件上的 Java Web 应用程序 error_404

jquery - 在单击之前更改面板的类别

javascript - 如果将鼠标悬停在另一个重叠元素上,则保持鼠标处于事件状态

javascript - jquery 下一个 div 元素选择

android - 固定背景不适用于移动设备

html - 将元素放置到它的祖 parent

css - div 的背景图像具有属性值

javascript - JQuery .slideDown() 向上滑动