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

Question

[No_name404]

При hover необходимо чтобы блок затемнялся и поверх добавлялся еще один с классом hid

html:

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

css:

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

Answer 1

[Ankhena]

1. Ссылки внутри другой ссылки не бывает (у вас у этих ссылок еще и одинаковый href, тем более не понятно зачем 2 ссылки).
2. Затемнение это псевдоэлемент, наложенный поверх блока и имеющий фоновый цвет с нужной вам прозрачностью.
3. Показ блока при наведении на родительский:

.goods-out a:hover .hid

да, так
Как только исправите ошибки с вложенными ссылками и закроете тег img все заработает.

Comments

[No_name404]

я вынес ссылку из ссылки,не помогает, может мне проще сслыку вам дать для наглядности,мне кажется мы не совсем понимаем друг друга

[Ankhena]

No_name404, если вы второй блок вынесли из ссылки, то в п. 3 нужно поменять селектор с вложенного на соседний или родственный, т. е. пробел на тильду или плюс

[Ankhena]

No_name404, Вот ваш код https://jsfiddle.net/ra0t95df/
в котором вторая ссылка заменена на span и там все работает.

[No_name404]

Ankhena, да, спасибо,помогло