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/

相关文章:

javascript - 在 Tab 键上自动滚动以输入使其部分隐藏

html - $brand-primary 在 laravel bootstrap 变量中不是全局的

javascript - 使先前选定的单词在 html 上消失,并在 javascript 的 Hangman 游戏中替换为新单词

javascript - CSS/Jquery OverFlow 隐藏不工作

html - 我在静态文件夹中的图像没有显示

html - 为什么我的 asp.net 页面不显示我设置的样式

css - 响应式粘性页脚菜单悬停效果

javascript - 如何通过js从svg div获取宽度和高度

css - 简单 CSS : . 类的奇怪之处:悬停属性被#child 的属性覆盖

html - 菜单项的CSS block 悬停状态