如何将出现的文本放置在最后一个图像头像上？

时间：2019-03-21 01:49:27

标签： html css

大家好，我问为什么我的最后一个图像头像是在我将鼠标拖到最后一个头像中时，出现在其顶部的文本，它应该像其他头像一样位于该头像内图片的内部。有人可以帮忙吗？谢谢你们

最后一个居中的化身的顶部是当我将鼠标拖到那里时，没有文本出现，它应该像其他化身一样出现在您拖动鼠标时出现的文本

img {
    border-radius: 50%;
  }

  table,
  th,
  td {
    border: 10px solid black;
  }

  .container {
  position: relative;
    width: 20%;
    float: left;
  }

  .image {
    opacity: 1;
    width: 50%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
  }

  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(17%, -20%);
    -ms-transform: translate(50%, 50%);
    text-align: center;
  }
  

  .last {
	position: relative;
    float: none;
    margin: auto;
	
    
  }

  .container:hover .image {
    opacity: 0.5;
  }
  	.text {
	  background-color: #dbe0dc;
	  color: black;
	  font-size: 16px;
	  padding: 10px 20px;
	}
	.column {
	  float: left;
	  width: 33.33%;
	  padding: 5px;
	}
}
	.container:hover .image {
	  opacity: 0.5;
	}

	.container:hover .middle {
	  opacity: 1;
	}
<center>
<div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
    <div class="text">avatar 1</div>
  </div>
  </div> <br>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 2</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 3</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 4</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 5</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 6</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 7</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 8</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 9</div>
</div></div>
 <div class="container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 10</div>
</div></div>
 <div class="last container">
<img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
<div class="middle">
 <div class="text">avatar 11</div>
</div></div>
</center>
<div id="wrapper" class="last container">
	<audio id="mytrack"  controls style="width:250px">
		<source src="audio . com" type="audio/mp3">
	</audio>
	<nav>
		<div id="defaultBar">
			<div id="progressBar"></div>
			</div>
</nav>
</div>

1 个答案:

答案 0 :(得分：0)

您可以更改：

.last {
  position: relative;
  float: none;
  margin: auto;
}

收件人：

.last {
  display: inline-block;
  float: none;
}

inline-block：

  

不会在元素后添加换行符，因此元素可以坐在   在其他元素旁边。

img {
  border-radius: 50%;
}

table,
th,
td {
  border: 10px solid black;
}

.container {
  position: relative;
  width: 20%;
  float: left;
}

.image {
  opacity: 1;
  width: 50%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(17%, -20%);
  -ms-transform: translate(50%, 50%);
  text-align: center;
}

.last {
  /*position: relative;
  float: none;
  margin: auto;*/
  display: inline-block;
  float: none;
}

.container:hover .image {
  opacity: 0.5;
}

.text {
  background-color: #dbe0dc;
  color: black;
  font-size: 16px;
  padding: 10px 20px;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/*} /*<< notice extra {*/*/

.container:hover .image {
  opacity: 0.5;
}

.container:hover .middle {
  opacity: 1;
}
<center>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 1</div>
    </div>
  </div> <br>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 2</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 3</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 4</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 5</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 6</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 7</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 8</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 9</div>
    </div>
  </div>
  <div class="container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 10</div>
    </div>
  </div>
  <div class="last container">
    <img src="https://images.vexels.com/media/users/3/145908/preview2/52eabf633ca6414e60a7677b0b917d92-male-avatar-maker.jpg" class="image" alt="Avatar" style="width:200px">
    <div class="middle">
      <div class="text">avatar 11</div>
    </div>
  </div>
</center>
<div id="wrapper" class="last container">
  <audio id="mytrack" controls style="width:250px">
		<source src="audio . com" type="audio/mp3">
	</audio>
  <nav>
    <div id="defaultBar">
      <div id="progressBar"></div>
    </div>
  </nav>
</div>

相关问题
最新问题