CSSトランジション：ボタンが個別にホバリングしない

Question

私はDeviantART用の新作アートワークウィジェットを作成しようとしていますが、ボタンを個別にホバーする方法は少ししかありません。 1つだけが上に乗っています。 DeviantARTのCSS構文は何らかの理由でdiv idをサポートしていないので、私の唯一の選択肢はクラスセレクタを使用することです。これは、私が本当に単純なWebデザイン/レイアウトを行ったように、私は本当に立ち往生しました。どんなサポートも大歓迎です！
*両方の要素で同じイメージを使用してテストします。移行プロパティは、個人テスト用でもあります。

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>を閉じるために逃しました。そうでなければ、あなたのコードは、パオロ・Foriga @

.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>