html - CSS 过渡 : Buttons not hovering individually

Question

我正在尝试为我的 DeviantART 编写一个新的特色艺术品小部件，但我在解决如何让按钮单独悬停时遇到了一些麻烦，因为当只有一个按钮悬停在上面时，它们都会突出显示。 DeviantART 的 CSS 语法出于某种原因不支持 div id，所以我唯一的选择是使用类选择器。这让我真的卡住了，因为我只做过简单的网页设计/布局。任何支持将不胜感激!
*在两个元素上使用相同的图像只是为了测试它们。过渡属性也供个人测试。

HTML:

<div class="container">
      <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png"  class="img">
      <div class="middle">
        <div class="text">1</div>
     </div>
    <div class="container">
      <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
      <div class="middle">
        <div class="text">2</div>
     </div>

CSS:

.container {
    background-color: white;
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 80px;
}
.img {
  background-color: white;
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  margin: 10px 0;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.container:hover .image {
  opacity: 0.7;
}
.container:hover .middle {
  opacity: 1;
  background-color: transparent;
}
.text {
  text-align: center;
  background-color: #8b9fa6;  
  margin: 0 auto;
  color: white;
  font-size: 20px;
  font-family: abel, sans-serif;
  letter-spacing: 10px;
  opacity: 1;
  width: 500px;
}

Answer 1

您只是错过了关闭您的 <div class="container"></div> .否则你的代码工作得很好

.container {
  background-color: white;
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 80px;
}

.img {
  background-color: white;
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  margin: 10px 0;
}

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

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

.container:hover .middle {
  opacity: 1;
  background-color: transparent;
}

.text {
  text-align: center;
  background-color: #8b9fa6;
  margin: 0 auto;
  color: white;
  font-size: 20px;
  font-family: abel, sans-serif;
  letter-spacing: 10px;
  opacity: 1;
  width: 500px;
}

<div class="container">
  <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
  <div class="middle">
    <div class="text">1</div>
  </div>
</div>
<div class="container">
  <img src="http://orig09.deviantart.net/410a/f/2017/122/0/0/vaporeon_by_nethartic-db7uyqc.png" class="img">
  <div class="middle">
    <div class="text">2</div>
  </div>
</div>