HTML'de iki kodu nasıl birleştirebilirim?

Bu kodları birleştirmek istiyorum fakat yapamadım. İlk ikisi bana ait diğer ikisi birleştirmek istediğim kodlar. Şimdiden teşekkürler

[CODE title="Benim HTML kodum"] <div class="w3-row-padding w3-light-grey">
<div class="w3-third w3-container w3-margin-bottom w3">
<img src="images/x" alt="Ürün" style="width:100%" class="w3-hover-opacity urun">
<div class="w3-container w3-light-grey urun">
<p><b>Deneme</b></p>
<button class="satbuton" onclick="window.location.href='http://www.hepsiburada.com/' "><strong>SATIN AL!</strong></button>
</div>
</div>[/CODE]

[CODE title="Benim CSS kodum"].urun{
border-style: solid;
}
.satbuton{
border-radius: 10px;
font-size: 150%;
margin: 2px;
height: 80px;
border-color: black;
background-color: black;
color: white;
width: 348px;
cursor: pointer;
}[/CODE]

[CODE title="Birleştirmek istediğim HTML kodu"]<div class="hover-overlay-container">
<img class="overlay-image" src="" />
<div class="overlay-btn-container">
<a href="#" class="overlay-btn">Sepete Ekle</a>
</div>
</div>[/CODE]

[CODE title="Birleştirmek istediğim CSS kodu"].hover-overlay-container {
position: relative;
width: 300px;
}

.hover-overlay-container:hover .overlay-image {
opacity: 0.3;
}

.hover-overlay-container:hover .overlay-btn-container {
opacity: 1;
}

.hover-overlay-container .overlay-image {
display: block;
width: 100%;
height: auto;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
}

.hover-overlay-container .overlay-btn-container {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
transition: .5s ease;
text-align: center;
transform: translate(-50%, -50%);
}

.hover-overlay-container .overlay-btn-container .overlay-btn {
color: #fff;
font-size: 16px;
padding: 10px 16px;
background-color: cornflowerblue;
text-decoration: none;
}[/CODE]

CSS kodunuzda tanımı yanlış yapmışsınız. HTML üzerinde "w3-row-padding W3-light-grey" adında class'landırmışsınız ama CSS'de ".urun" vb. bir ad vermişsiniz. 2'sini de aynı isimlendirme yapınız.