Динамически обложка 2 divs с CSS

Question

У меня есть 2 divs, которые мне нужны в тени после действия пользователя. Дивы лишь две дивы рядом друг с другом:

<div class="bought">content</div> 
<div class="class2">content</div> 

Здесь вы CSS, который становится видимым с помощью JQuery:

#view-hint .body > .img .bought { 
    display:none; 
    cursor:pointer; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index:2; 
    background: rgba(0,0,0,0.75); 
} 

Когда срабатывает событие это то, что он выглядит следующим образом:

Эта нижняя белая область также должна быть покрыта динамически.

Подход, который я решил взять, состоял в том, чтобы обернуть оба div в другой div, но это нарушает внешний вид всего. Так что я попытался сделать верхний Див больше Основы размера, но это еще не совершенно ...

  var originalHeight = $('.bought').height(); 
      var windowWidth = $(window).width(); 
      if (windowWidth < 710) { 
       $('.bought').css('height', originalHeight * 0.6); 
      } else if (windowWidth > 710 && windowWidth < 1000) { 
       $('.bought').css('height', originalHeight * 0.698); 
      } else if (windowWidth > 1000 && windowWidth < 1300) { 
       $('.bought').css('height', originalHeight * 0.699); 
      } else if (windowWidth > 1300 && windowWidth < 1600) { 
       $('.bought').css('height', originalHeight * 0.865); 
      } else if (windowWidth > 1600 && windowWidth < 2000) { 
       $('.bought').css('height', originalHeight * 1.035); 
      } else { 
       $('.bought').css('height', "662px"); 
      } 

Это в основном работает для всех экранов размера, но если вы измените масштаб он по-прежнему вызывает вопросы.

Как я могу сделать это, когда оба этих divs покрываются CSS динамически?

Edit:

Вот полный HTML с добавленной оберткой и изображение, которое приводит:

   <div id="test123"> 
        <div class="bought"> 
         <div class="row"> 
          <div class="col"> 
           <div class="body"> 
            <?php if(Request::is('user/*')) { ?> 
             <div id="boughtquestion">Did you buy this for <?php echo $user->firstName ?>?</div> 
             <div class="options"> 
              <!-- <a id="boughtyes" class="cbutton whiteonpurple" onclick="markPurchased(event)">Yes</a> --> 
              <a id="boughtyes" class="cbutton whiteonpurple">Yes</a> 
              <a id="boughtno" class="cbutton whiteonpurple">No</a> 
             </div> 
            <?php } else { ?> 
             <div>Bought?</div> 
             <p>Click here to send hinters a message to let them know.<br />And yes, it can still be a surprise!</p> 
            <?php } ?> 
            </div> 
          </div> 
         </div> 
        </div> 
        <div class="markedaspurchased"> 
         <div class="row"> 
          <div class="col"> 
           <div class="body"> 
            <div id="markedpurchased">Marked as Purchased</div> 
            <p id="markedmessage">Marking as purchased prevents duplicate gift giving. Dont worry <?php echo $user->firstName ?> doesn't get notified but you can let <?php echo ($user->gender == 'female' ? 'him' : 'her') ?> know by sending a message!</p> 
            <p><a id="sendmessagebutton" class="cbutton whiteonpurple purchasebutton">Send message to let them know</a></p> 
            <p><a id="anonymousbutton" class="cbutton whiteonpurple purchasebutton">Send anonymous message</a></p> 
            <p><a id="secretbutton" class="cbutton whiteonpurple purchasebutton">Keep it a secret</a></p> 
           </div> 
          </div> 
         </div> 
        </div> 

      </div> 

      <p class="description"></info-coverp> 

      <div class="options"> 
       <a class="buy cbutton whiteonpurple" target="_blank">Buy</a> 
       <a class="hint cbutton whiteonblack" target="_blank">Hint</a> 
      </div> 

      <div class="info"> 
       <div class="bar"></div> 
       <div class="rehints">10 REHINTS</div> 
       <div class="hinter"> 
        <div class="picture monophoto"> 
         <div class="text">BO</div> 
         <div class="img" style="background-image: url();" onclick=""></div> 
        </div> 
        <div class="content"> 
         <div class="one">Hinted by:</div> 
         <div class="two"><a href=""></a></div> 
        </div> 
       </div> 
       <div class="partnertext">Partnered Hint</div> 
       <div style="clear:both;"></div> 
      </div> 
     </div> 

Answer 1

Поскольку вы используете Jquery, почему бы не дать дивы а, отдельный класс, а затем используйте .wrapAll, чтобы создать обертку ... затем поместите надпись поверх нее.

$(".wrapped").wrapAll('<div class="overlay" />');

.overlay { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.overlay::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapped bought">content 1</div> 
 
<div class="wrapped class2">content 2</div>