CSS過渡：按鈕不徘徊單獨

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>