Question

我对Web开发还很陌生，所以请原谅我，如果我以前曾回答过这个问题，但是我看了一下，却没有发现可以与我的代码相关的任何东西。

我有3个图像以内嵌方式显示，并且悬停时，我希望该特定图像的尺寸增加，而另2个图像保留在原处。我遇到的问题是，当我将鼠标悬停并且图像增大时，其他两个图像会四处移动。我尝试将position属性更改为absolute和relative，但是都没有用。

作为参考，这里是源代码：https://codepen.io/jacobc1596/pen/mdbWyqm

或者如果更容易在此处看到它，则CSS代码为：

body {
  background-color: #333;
}

h1 {
  font-family: Righteous, sans-serif;
  text-align: center;
  color: white;
  padding: 40px
}

h2 {
  font-family: Righteous, sans-serif;
  font-size: 40px;
  text-align: center;
  color: white;
  padding: 10px
}

.topnav {
  background-color: #333;
  overflow: hidden;
  margin-right: 30px;
  margin-top: 30px;
}

.topnav a {
  float: right;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  font-family: Righteous, sans-serif;
  border-radius:30px;
}

.topnav a:hover {
  background-color: #fff;
  color: #000;
  transform: scale(1.1,1.1);
}


.topnav a.active {
  background-color:#fff;
  border-radius:30px;
  color: #000;
}

#logo {
  float:left;
  border: none;
  margin-left: 30px;
}

#contact {
  border: 2px solid;
}

#contact:hover {
  background-color: white;
  color: black;
}

#studio {
  display: block;
  margin: 0 auto;
  width: 500px;
  height: 500px;
  margin-top: 50px;
  border-radius:45%;
}

#studio:hover {
  width:525px;
  height:525px;
}

#services {
  width:300px;
  height:300px;
  border-radius:50%;
  margin:30px;
  filter: grayscale(100%); 
}

#services:hover {
  width:350px;
  height:350px;
}

.images {
  margin-top: 50px;
  text-align: center;
}

.images a {
  text-decoration:none;
  color: #fff;
  font-family: Righteous, sans-serif;
  color: #fff;
  font-size:30px;
}

.images a:hover {
  color: gray;
}

figure {
  display:inline-block;
}

HTML代码是（为简洁起见，图像链接已更改）：

<div class="topnav">  
  <a id="contact" href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Portfolio</a>
  <a class="active" href="#">Home</a>
  <a id="logo" href="#">tone-o productions</a>
</div>

<div class="images">
<figure>
  <a href="#"><img id="services" src="image URL here"></a>
  <figcaption><a href="#">Graphics</a></figcaption>
</figure>
<figure>
  <a href="#"><img id="services" src="image URL here" alt="pic2"></a>
  <figcaption><a href="#">Production</a></figcaption>  
</figure>

<figure>
<a href="#"><img id="services" src="image URL here" alt="pic2"></a>
  <figcaption><a href="#">Videography</a></figcaption>
</figure> 
</div>

谢谢。

Answer 1

太棒了！

跳转的原因是您正在更改悬停时图像的宽度和高度，从而推动了所有操作。相反，请使用“变换和缩放”，而不要弄乱绝对定位。

它不是像素完美的，但这没关系。

.images {
  display: flex
}

figure img {
   transition: transform 250ms ease-out
}

figure:hover img{
  transform: scale(1.1);
  transform-origin: center
}

<div class="images">
<figure>
  <a href="#"><img id="services" src="//placehold.it/128x128"></a>
  <figcaption><a href="#">Graphics</a></figcaption>
</figure>
<figure>
  <a href="#"><img id="services" src="//placehold.it/128x128" alt="pic2"></a>
  <figcaption><a href="#">Production</a></figcaption>  
</figure>

<figure>
<a href="#"><img id="services" src="//placehold.it/128x128" alt="pic2"></a>
  <figcaption><a href="#">Videography</a></figcaption>
</figure> 
</div>

Answer 2

html：

   <div class="topnav">  
  <a id="contact" href="#">Contact</a>
  <a href="#">About</a>
  <a href="#">Portfolio</a>
  <a class="active" href="#">Home</a>
  <a id="logo" href="#">tone-o productions</a>
</div>

<div class="images">
<figure>
  <a href="#"><img id="services" src="https://instagram.flhr3-2.fna.fbcdn.net/vp/e06330d5a57920dc42271cfdfbf7ee31/5E0D37DE/t51.2885-15/e35/29738767_156304275196682_9010195359502172160_n.jpg?_nc_ht=instagram.flhr3-2.fna.fbcdn.net" alt= "pic1"></a>
  <figcaption><a href="#">Graphics</a></figcaption>
</figure>
<figure>
  <a href="#"><img id="services" src="https://instagram.flhr3-2.fna.fbcdn.net/vp/5e98b9dfbeb3d92297ab180e45731468/5DFABE94/t51.2885-15/sh0.08/e35/s750x750/27880184_580447755636489_3066552335187574784_n.jpg?_nc_ht=instagram.flhr3-2.fna.fbcdn.net" alt="pic2"></a>
  <figcaption><a href="#">Production</a></figcaption>  
</figure>

<figure>
<a href="#"><img id="services" src="https://instagram.flhr3-2.fna.fbcdn.net/vp/227d1000d16dd864752896c0ce4653c7/5DD93912/t51.2885-15/sh0.08/e35/s750x750/42429044_495556827588508_8753915026181074890_n.jpg?_nc_ht=instagram.flhr3-2.fna.fbcdn.net" alt="pic2"></a>
  <figcaption><a href="#">Videography</a></figcaption>
</figure> 
</div>

CSS：

@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

body {
  background-color: #333;
}
h1 {
  font-family: Righteous, sans-serif;
  text-align: center;
  color: white;
  padding: 40px
}

h2 {
  font-family: Righteous, sans-serif;
  font-size: 40px;
  text-align: center;
  color: white;
  padding: 10px
}

.topnav {
  background-color: #333;
  overflow: hidden;
  margin-right: 30px;
  margin-top: 30px;
}
/*to style the links in the navigation bar */
.topnav a {
  float: right;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
  font-family: Righteous, sans-serif;
  border-radius:30px;
}
/* change the color of links on hover */
.topnav a:hover {
  background-color: #fff;
  color: #000;
  transform: scale(1.1,1.1);
}
/* add color to the active/current link*/
.topnav a.active {
  background-color:#fff;
  border-radius:30px;
  color: #000;
}
#logo {
  float:left;
  border: none;
  margin-left: 30px;
}

#contact {
  border: 2px solid;
}
#contact:hover {
  background-color: white;
  color: black;
}

#studio {
  display: block;
  margin: 0 auto;
  width: 500px;
  height: 500px;
  margin-top: 50px;
  border-radius:45%;
}

#studio:hover {
  width:525px;
  height:525px;

}

#services {
  width:70%;
  height:300px;
  border-radius:50%;
  //margin:30px;
  filter: grayscale(100%); 
}

#services:hover {
  width:75%;
  height:350px;
}

.images {
  margin-top: 50px;
  text-align: center;
  width:100%;
}

.images a {
  text-decoration:none;
  color: #fff;
  font-family: Righteous, sans-serif;
  color: #fff;
  font-size:30px;
}

.images a:hover {
  color: gray;
}

figure {
  display:inline-block;
  width:30%;
  margin:0px;
}

Answer 3

当您放大图像时，应更改页边距，以免它们推动其他任何物体。图片尺寸增加了50px，因此您应将边距减少25px。将margin:5px;行添加到您悬停的图像样式中：

#services:hover {
  width:350px;
  height:350px;
  margin:5px;
}

将鼠标悬停在图像上时如何停止元素的移动位置

3 个答案: