关键词：
【中文标题】尝试使用 html 和 css 获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变【英文标题】：Trying to get a mouse hover zoom transistion effect using html and css but image is getting overflowed, the images position are getting altered 【发布时间】：2020-05-14 14:38:14 【问题描述】：我是 HTML 和 CSS 的新手。我试图在图像上获得鼠标悬停缩放过渡。我能够毫无问题地进行过渡，但我不希望它溢出随页面大小而变化的图像大小。这是css和html代码。我在 css 代码的“.img-outer”部分遇到问题。
img
width: 30%;
float: left;
margin: 1.66%;
/* .img-outer
overflow: hidden;
max-width: 30%;
max-height: 30%;
*/
.img-inner
position: relative;
img
transition: 0.5s ease;
img:hover
transform: scale(1.1);
p
font-family: "Bebas Neue";
font-size: 18px;
margin-left: 1.6%;
margin-top: 3%;
color: rgb(77, 75, 75);
#name
font-family: "Bebas Neue";
font-size: 23px;
color: black;
text-align: center;
margin-bottom: 3%;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 2%;
padding-top: 1.5%;
width: 75%;
margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="photostyle.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Photo Blog</title>
</head>
<body>
<p id="name">BLOG NAME</p>
<p>Mono Photographs</p>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"
/>
</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：检查解决方案。
.img-outer
overflow: hidden;
width: 30%;
float: left;
margin: 1.66%;
.img-inner
position: relative;
img
transition: 0.5s ease;
width:100%;
img:hover
transform: scale(1.1);
p
font-family: "Bebas Neue";
font-size: 18px;
margin-left: 1.6%;
margin-top: 3%;
color: rgb(77, 75, 75);
#name
font-family: "Bebas Neue";
font-size: 23px;
color: black;
text-align: center;
margin-bottom: 3%;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 2%;
padding-top: 1.5%;
width: 75%;
margin: 0 auto;
<p id="name">BLOG NAME</p>
<p>Mono Photographs</p>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"
/>
</div>
</div>【讨论】：
使用 CSS 在悬停图像上创建缩放效果？
...【发布时间】：2013-03-2307:54:51【问题描述】：我目前正在尝试在将鼠标悬停在我的四个图像之一上时创建缩放效果。问题是大多数示例通常使用表格或掩码div来应用某种效果。这是一个实现我想要的this的示例。This是我目前的代... 查看详情
如何使用 CSS 和 HTML 获得“悬停”和“活动”状态？
】如何使用CSS和HTML获得“悬停”和“活动”状态？【英文标题】：Howtoget\'hover\'and\'active\'statesworkingwithCSSandHTML?【发布时间】：2012-11-1821:04:05【问题描述】：我的网站顶部的标题中有3个菜单项（它目前不可用，所以我无法提供链... 查看详情
使用html和css实现鼠标悬停时文本的旋转
...旋转。每个文字或者单词都包裹在<li>标记中，然后使用CSS：hoverSelector选择器，我们将在Y轴上旋转每个文字。我们将把文字分为两部分，在第一部分中，我们将创建旋转文本的HTML基本结构。在第二部分中，通过CSS实现将鼠... 查看详情
如何在一行上获得 3d 瓷砖并在悬停时获得缩放效果？
...hover?【发布时间】：2020-01-1023:05:51【问题描述】：我正在尝试连续获得3d瓷砖，我想放大悬停，它应该是响应式的。我正在尝试获得以下外观，我正在使用bootstrap3和Wordpress。请指导我如何实现这一目标https://www.overdrive.com< 查看详情
鼠标悬停时间 CSS HTML [重复]
...秒钟？我只能使用html+css。【问题讨论】：到目前为止你尝试了什么？把你的代码放在你试过的地方。不可能的哥们。它们会立即发生。你需要使用Jque 查看详情
使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放
...ularJS【发布时间】：2015-12-1707:18:22【问题描述】：我正在尝试使用CSS放大svg图像的路径元素。但结果很奇怪，因为元素正在放大，但也改变了它们的x和位置。我想要使用CSS或AngularJS的悬停缩放效果。我试过transform:scale(1.2);cs... 查看详情
如何在 Unity 5 中检测 UI 图像的鼠标悬停？
...缩放，但我只希望它在鼠标悬停在图像上时进行缩放。我尝试过使用OnMouseEnter、OnMouseOver、事件触发器，所有这三个都没有碰撞器、碰撞器、 查看详情
仅使用 HTML 和 CSS 在图像顶部显示表格
...悬停在图像上时，表格的不透明度也会发生变化。我已经尝试过更改桌子上的不透明度，但这似乎不起作用。（或者我可能做错了）。代码只有HTML和CSS，因为它将用于 查看详情
使用 CSS 变换在悬停时缩放 SVG 矩形
】使用CSS变换在悬停时缩放SVG矩形【英文标题】：ScalingSVGrectonhoverusingCSStransform【发布时间】：2012-10-2203:19:01【问题描述】：似乎在悬停时对HTML或SVG元素应用相同的CSS变换不会产生相同的效果。正如您在下面的小提琴中看到的那... 查看详情
利用css3实现鼠标悬停在图片上图片缓慢缩放的两种方法
1.改变background-size属性 将图片作为某个html元素的背景图片，用transition属性改变图片的大小。1.container{2background-size:100%100%;3transition:all2s;4}5.container:hover{6background-size:120%120%;7}这种方法有个问题是图片缩放的时候会出现抖动... 查看详情
css实现鼠标悬停在图片上图片缓慢缩放效果
方法一：.container{ background-size:100%100%; transition:all2s;}.container:hover{ background-size:120%120%;} 方法二：img{ transition:all2s;}img:hover{ transform:scale(1.2); //图片放大的倍 查看详情
IE8 上的鼠标悬停/悬停效果缓慢
...个奇怪的性能问题，该表有很多行（本例中为100行）。我尝试了很多不同的方法，但我似乎找不到任何方法来尽可能快地获得它。如果我在每个事件上切换类，则所有IE版本的性能都会下降，如果我通过javascript直接操作CSS，IE6和 查看详情
使用css将鼠标悬停在按钮上时如何更改站点背景图像？
】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情
悬停和鼠标悬停的不同 CSS 过渡延迟？
...：2011-08-2017:38:00【问题描述】：是否可以在“状态”之间使用具有不同延迟切换的CSS3转换？例如，我试图让一个元素在悬停时立即更高，然后在“mouseout”上等待一秒钟，然后再滑回元素的初始高度。演示页面：jsfiddle.net/RTj9K（... 查看详情
使用jquery在悬停时添加随机图像
...SS很难修改，除了给div加上class和ID。那么为什么我要尝试使用JSJquery来处理它。当我将鼠标悬停在div中的图像上时，我想随机显示GIF。当鼠标移出时，效果应该消失，以便可以再次看到原始图像。（在本例中，目标是让gif随... 查看详情
鼠标悬停后如何突出显示字符？
...hover?【发布时间】：2020-10-1603:47:01【问题描述】：我正在尝试在CSS中创建这种效果。到目前为止，我只能以相反的顺序获得这种效果。这意味着当我将鼠标悬停在第一个字母上时，它会突出显示其后面的所有其他文本/字符（他... 查看详情
如何在激活 CSS“:hover”的纯 JavaScript 中模拟鼠标悬停？
...悬停”侦听器被触发，CSS“悬停”声明也从未设置！我也尝试过 查看详情
更改嵌套 div 内鼠标悬停时的图层颜色
...2018-11-2319:03:26【问题描述】：我有以下html代码，我正在尝试更改div标签的背景颜色，这样当我将鼠标悬停在文本上时，背景应该变成灰色，但是当我将鼠标移出标签，它应该变成白色。我正在尝试使用css来做到这一点，但我很... 查看详情