CSS-悬停效果不适用于特定元素

Question

我是编码的新手，我正在尝试将悬停效果放在背景图像上。我使用网格，第一个工作正常但第二个不起作用。在第一节之后我还有大约5个人，我不能让他们工作更加友好。我在这里错过了什么？它的代码完全相同。

.blog1 {
margin-top:5%;
grid-column: 1 /  3;   
grid-row: 3 / 3;   
background-image: url(../../Images/EditedImages/OdellOutsideedited.png);
min-height: 300px;
background-size: cover;
background-repeat:no-repeat;
background-position: top; 
**transition: all ease-in-out 300ms;  
opacity: 1;
}
.blog1:first-child:hover {
opacity: 0.75;

}**


.blog2 {
margin-top: 5%;
grid-column:  3 / 5  ; 
grid-row: 3 /  3;
background-image: url(../../Images/EditedImages/2RandomDrinking.png);
min-height: 300px; 
background-size:cover;
background-repeat: no-repeat;
background-position: center;
transition: all ease-in-out 300ms; 
opacity: 1;
}

.blog2:first-child:hover {
opacity: 0.75;

}



 HTML

<div class="grid">

<div class="blog1"></div>
<div class="blog2"></div>
<div class="blog3"></div>
<div class="blog4"></div>
<div class="blog5"></div>
<div class="blog6"></div>