Как сделать чтобы при наведении блок затемнялся и всплывал дополнительный блок?

<div class='goods-out'>
               <a href="productPage.php#${key}">
                           <div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12  cart ">
                                 <div class="item">
                                    <div class="pro-img">
                                          <img src="/${data[key].img}" 
                                     </div>
                                     <div class="prod">
                                        <h4 class='name'>${data[key].name}</h4>
                                      </div>
                                   </div>
                                </div>
                         <a class='hid' href="productPage.php#${key}" >- 20% скидка<br /> перейти</a>
                </a>
          </div>

.goods-out a:hover{
    opacity: 0.8;
    -webkit-transition: all.3s ease;
    -moz-transition:    all.3s ease;
    -o-transition:      all.3s ease;
    transition:         all.3s ease;
}
.hid{
    display: none;
}
.goods-out a:hover .hid{
    display: block;
}