CSS Transitions: Buttons not hovering individually - html

Question

I'm trying to code a new featured artwork widget for my DeviantART and I'm having a little but of trouble working out how to get the buttons to hover individually, as they both highlight when only one is hovered over.
DeviantART's CSS syntax doesn't support div id's for whatever reason, so my only option is to use class selectors. This got me really stuck, as I've only ever done simple web design/layout. Any support would be greatly appreciated!
*The same image is used on both elements just to test them. The transition properties are for personal testing as well.
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

You just missed to close your <div class="container"></div>. Otherwise your code works just fine
.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>