БЛОГ НА HUSL


Background-image не подставляется для указанного класса

Автор вопроса: Aleksus 

$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
    $("#popup2").show();
    $("#popup3").show();
}
function PopUpHide(){
    $("#popup1").hide();
    $("#popup2").hide();
    $("#popup3").hide();
}
 .popcontainer {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
     width: 100%;
    height: 400px;
     margin:0px auto;
     padding:0;
 }
 #img1 {
     background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

 }
 #img2 {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");

 }
 #img3 {
 background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");

 }
    .pop {
        text-align: center;
        cursor: pointer;
        width: 100%;
        height: 100%;
        box-sizing:border-box;

        transition: 0.3s linear;
     }
     .poptext {
         height: 100%;
         color: transparent;
         transition: 0.3s linear;
         padding-top: 9rem;
     }
     .poptext:hover {
        color: white;
    }
 .poptext p {
     letter-spacing: 1px;
     font-size: 30px;
     font-weight: lighter;
     font-family: 'PTF55F';
     margin: 0;
    }
    .poptext span {
        margin-top: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 9px;
        font-weight: 700;
        font-family: 'Segoe UI';
     }

 .popcontainer:hover .pop {
     background: rgba(0,0,0,0.7);
 }
 .b-popup {
      /* width: 100%; */
      display: block;
        min-height: 100%;
        background-color: black;
        overflow: auto;
        position: fixed;
        top: 0px;
        left: 0;
        bottom: 0;
      z-index: 1;
      padding-left: 15rem;
      padding-right: 15rem;
        opacity:0; /*Элемент полностью прозрачный (невидимый)*/
        /*transition: 1s;*/ /*Скорость перехода состояния элемента*/
        animation: show .8s 1; /* Указываем название анимации, её время и количество повторов*/
        animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */
        /*animation-delay: 1s;*/ /* Задержка перед началом */
     /* display: block;
     padding-left: 15rem;
     padding-right: 15rem;
     z-index: 1;
     overflow: auto;
     position: fixed; */
 }
 @keyframes show{
0%{
opacity:0;
}
100% {
opacity:1;
}
}
 @media screen and (max-width: 1500px) {
     .b-popup {
         padding-left: 3rem;
         padding-right: 3rem;
    }
 }
 @media screen and (max-width: 400px) {
    .b-popup {
        padding-left: 2rem;
        padding-right: 2rem;
 }
 }
 /* #popup5.img.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
 } */
.b-popup .row {
    background: gray;
    margin-top: 5rem;
    text-align: center;
}
.img1.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
.img2.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
.img3.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
/* #popimg1  {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

} */
/* @media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
}

@media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
} */
/* #img1-1 {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

}
#img2-2 {
background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");

} */
.background.col-sm {
    background-color: #deddd9;
    padding-right: 0;
  padding-bottom: 2rem;
  padding-top: 0rem;
}
@media screen and (max-width: 500px) {
    .background.col-sm {
        padding-right: 1rem;
 }
}
.text.col {
    background-color: white;
    padding: 5rem;
    text-align: left;
    font-size: 14px;
    font-family: 'PTF55F';
    line-height: 2rem;
    /* height: 100%; */
    margin-top: -2rem;
    /* position: absolute; */
}
@media screen and (max-width: 1024px) {
    .text.col {
        padding: 1rem;
 }
}
@media screen and (max-width: 400px) {
    .text.col {
        margin-top: -4rem;
 }
}
.text.col h2 {
font-family: 'PTF55F';
letter-spacing: 1px;
font-weight: normal;

}
.text.col h6 {
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
color: #c58a52;
font-weight: normal;
padding-bottom: 2rem;
}
.b-popup-close a {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    color: #85714C;
    cursor: pointer;
    float: right;
    padding: 10px 30px;
}
.b-popup-close a:after {
 content: "\274c";
 font-size: 14px;
 color: #85714C;
 margin-left: 10px;
}
    
<a href="javascript:PopUpShow()">
    <div class="popcontainer" id="img1">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup1">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div class="img1 col">

       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>



    
<a href="javascript:PopUpShow()">
    <div class="popcontainer" id="img2">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup2">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div class="img2 col">

       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>
 


    
<a href="javascript:PopUpShow()">
    <div class="popcontainer" id="img3">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup3">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div class="img3 col">

       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>

Background-image не подставляется для указанного класса. Для .popcontainer через id-шники всё подставилось правильно, для .img1.col, .img2.col, .img3.col подставляется, но только одна и при том, для всех трёх классов. Пробовал через id-шники, тоже самое.


Источник

Ответы (3 шт):

Автор решения: CbIPoK2513

Не обратил внимание на скрипт..

Посмотрите на его логику:

У вас есть 3 "модальных окна" - #popup1, #popup2 и #popup3.

function PopUpShow(){
  $("#popup1").show(); // Показать 1
  $("#popup2").show(); // Показать 2
  $("#popup3").show(); // Показать 3
  // В итоге ВСЕ показаны
}

function PopUpHide(){
  $("#popup1").hide(); // Скрыть 1
  $("#popup2").hide(); // Скрыть 2
  $("#popup3").hide(); // Скрыть 3
  // В итоге ВСЕ скрыты.
}

На вашем месте я бы переделал вёрстку и скрипт следующим образом:

ПРИМЕР:

$('[data-modal]').on('click', function(){ // При нажатии на элемент с атрибутом data-modal
  let id = $(this).attr('data-modal'); // записываем значение data-modal в переменную
  if($(id).length > 0) { // Проверяем, есть ли элемент на странице равный переменной `id` (в примере будет элемент `$('#popup1')`
    $('.b-popup').hide(); // "прячем" все `.b-popup`
    $(id).show(); // Показываем которая равна `id`
  }
});

$('.close-modal').on('click', function(){ // Если нажата кнопка "закрыть" у модальки, то
  $(this) // Обращаемся к текущему элементу
    .closest('.b-popup') // ищем среди родителях элемент с классом `.b-popup` (он отвечает за всю модальку
    .hide(); // прячем этот `.b-popup`
});
.card {
   display: block;
   width: 50vw;
   position: relative;
}

.card > img {
  display: block;
  max-width: 100%;
}

.card .popcontainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.b-popup {
  display: block;
  width: 100%;
  height: 100vh;
  background: #000;
  position: fixed;
  overflow: hidden auto;
  top: 0;
  left: 0;
  z-index: 9999;
}

.b-popup-close {
  display: flex;
  justify-content: flex-end;
  color: red;
}

.img {
  display: block;
  max-width: 100%;
}

.background {
  background: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- атрибут data-modal является ссылкой на модальку, т.е. на модельку с id="popup1" -->
<div class="card" data-modal="#popup1">
  <img src="https://i.imgur.com/UttYlgN.png">
  <div class="popcontainer">
    <div class="pop">
      <div class="poptext">
        <p>Oliver Voogt</p>
        <span>коммерческий директор </span>
      </div>
    </div>
  </div>
</div>

<!-- А вот и эта модалька -->
<div class="b-popup" id="popup1">
  <div class="b-popup-close">
    <span class="close-modal">close</span>
  </div>
  <div class="row">
    <img class="img" src="https://i.imgur.com/UttYlgN.png">
    <div class="background col-sm">
      <h2></h2>
      <div class="row">
        <div class="text col">
          <h2>Oliver Voogt</h2>
          <h6>коммерческий директор</h6>Почему он используется? Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона,
          а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а
          также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div>
      </div>
    </div>
  </div>
</div>

→ Ссылка
Автор решения: Arcadiy

У вас ошибка, вы в класс вставили id/ Вот тут class="img1 col"> а надо было вот так id="img1" class="col"> И в редакторе уменьшите изображение до нормального размера. В Css пропишите размер, я поставил auto

$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
    $("#popup2").show();
    $("#popup3").show();
}
function PopUpHide(){
    $("#popup1").hide();
    $("#popup2").hide();
    $("#popup3").hide();
}
.popcontainer {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
     width: 100%;
    height: 400px;
     margin:0px auto;
     padding:0;
 }
 #imgone {
     background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
    width: auto;
    height: 200px;
 }
 #imgtwo {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
    width: auto;
    height: 200px;
 }
 #imgthree {
 background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");
    width: auto;
    height: 200px;
 }
    .pop {
        text-align: center;
        cursor: pointer;
        width: 100%;
        height: 100%;
        box-sizing:border-box;

        transition: 0.3s linear;
     }
     .poptext {
         height: 100%;
         color: transparent;
         transition: 0.3s linear;
         padding-top: 9rem;
     }
     .poptext:hover {
        color: white;
    }
 .poptext p {
     letter-spacing: 1px;
     font-size: 30px;
     font-weight: lighter;
     font-family: 'PTF55F';
     margin: 0;
    }
    .poptext span {
        margin-top: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 9px;
        font-weight: 700;
        font-family: 'Segoe UI';
     }

 .popcontainer:hover .pop {
     background: rgba(0,0,0,0.7);
 }
 .b-popup {
      /* width: 100%; */
      display: block;
        min-height: 100%;
        background-color: black;
        overflow: auto;
        position: fixed;
        top: 0px;
        left: 0;
        bottom: 0;
      z-index: 1;
      padding-left: 15rem;
      padding-right: 15rem;
        opacity:0; /*Элемент полностью прозрачный (невидимый)*/
        /*transition: 1s;*/ /*Скорость перехода состояния элемента*/
        animation: show .8s 1; /* Указываем название анимации, её время и количество повторов*/
        animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */
        /*animation-delay: 1s;*/ /* Задержка перед началом */
     /* display: block;
     padding-left: 15rem;
     padding-right: 15rem;
     z-index: 1;
     overflow: auto;
     position: fixed; */
 }
 @keyframes show{
0%{
opacity:0;
}
100% {
opacity:1;
}
}
 @media screen and (max-width: 1500px) {
     .b-popup {
         padding-left: 3rem;
         padding-right: 3rem;
    }
 }
 @media screen and (max-width: 400px) {
    .b-popup {
        padding-left: 2rem;
        padding-right: 2rem;
 }
 }
 /* #popup5.img.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
 } */
.b-popup .row {
    background: gray;
    margin-top: 5rem;
    text-align: center;
}
.img1.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
.img2.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
.img3.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
}
/* #popimg1  {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

} */
/* @media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
}

@media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
} */
/* #img1-1 {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

}
#img2-2 {
background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");

} */
.background.col-sm {
    background-color: #deddd9;
    padding-right: 0;
  padding-bottom: 2rem;
  padding-top: 0rem;
}
@media screen and (max-width: 500px) {
    .background.col-sm {
        padding-right: 1rem;
 }
}
.text.col {
    background-color: white;
    padding: 5rem;
    text-align: left;
    font-size: 14px;
    font-family: 'PTF55F';
    line-height: 2rem;
    /* height: 100%; */
    margin-top: -2rem;
    /* position: absolute; */
}
@media screen and (max-width: 1024px) {
    .text.col {
        padding: 1rem;
 }
}
@media screen and (max-width: 400px) {
    .text.col {
        margin-top: -4rem;
 }
}
.text.col h2 {
font-family: 'PTF55F';
letter-spacing: 1px;
font-weight: normal;

}
.text.col h6 {
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
color: #c58a52;
font-weight: normal;
padding-bottom: 2rem;
}
.b-popup-close a {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    color: #85714C;
    cursor: pointer;
    float: right;
    padding: 10px 30px;
}
.b-popup-close a:after {
 content: "\274c";
 font-size: 14px;
 color: #85714C;
 margin-left: 10px;
}
<a href="javascript:PopUpShow()">
    <div class="popcontainer" id="imgone">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup1">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div id="imgone" class="col">

       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>



    
<a href="javascript:PopUpShow()">
    <div class="popcontainer" id="imgtwo">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup2">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div id="imgtwo" class="col">

       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>
 


    
<a href="javascript:PopUpShow()">
    <div class="popcontainer" id="imgthree">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup3">
    <div class="b-popup-close">
           <a href="javascript:PopUpHide()">close</a> 

    </div>
       <div class="row">
       <div id="imgthree" class="col">

       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>

→ Ссылка
Автор решения: Alex Krass

Этот ответ просто для понимания, что в вашем коде изначально не так. Я сделал минимальные изменения. Добавил классам .img1.col .img2.col .img3.col высоту в 400px с текстом и добавил код, чтобы модальные окна открывались по очереди, а не всем скопом. Можете нажать на кнопку выполнить код и потом опцию развернуть во всю страницы (справа сверху), и посмотреть итог.

$(document).ready(function(){
    PopUpHide(1);
    PopUpHide(2);
    PopUpHide(3);
});
function PopUpShow(a){
    if(a == 1) $("#popup1").show();
    if(a == 2) $("#popup2").show();
    if(a == 3) $("#popup3").show();
}
function PopUpHide(a){
    if(a == 1) $("#popup1").hide();
    if(a == 2) $("#popup2").hide();
    if(a == 3) $("#popup3").hide();
}
.popcontainer {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 50%;
     width: 100%;
    height: 400px;
     margin:0px auto;
     padding:0;
 }
 #img1 {
     background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

 }
 #img2 {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");

 }
 #img3 {
 background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");

 }
    .pop {
        text-align: center;
        cursor: pointer;
        width: 100%;
        height: 100%;
        box-sizing:border-box;

        transition: 0.3s linear;
     }
     .poptext {
         height: 100%;
         color: transparent;
         transition: 0.3s linear;
         padding-top: 9rem;
     }
     .poptext:hover {
        color: white;
    }
 .poptext p {
     letter-spacing: 1px;
     font-size: 30px;
     font-weight: lighter;
     font-family: 'PTF55F';
     margin: 0;
    }
    .poptext span {
        margin-top: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-size: 9px;
        font-weight: 700;
        font-family: 'Segoe UI';
     }

 .popcontainer:hover .pop {
     background: rgba(0,0,0,0.7);
 }
 .b-popup {
      /* width: 100%; */
      display: block;
        min-height: 100%;
        background-color: black;
        overflow: auto;
        position: fixed;
        top: 0px;
        left: 0;
        bottom: 0;
      z-index: 1;
      padding-left: 15rem;
      padding-right: 15rem;
        opacity:0; /*Элемент полностью прозрачный (невидимый)*/
        /*transition: 1s;*/ /*Скорость перехода состояния элемента*/
        animation: show .8s 1; /* Указываем название анимации, её время и количество повторов*/
        animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */
        /*animation-delay: 1s;*/ /* Задержка перед началом */
     /* display: block;
     padding-left: 15rem;
     padding-right: 15rem;
     z-index: 1;
     overflow: auto;
     position: fixed; */
 }
 @keyframes show{
0%{
opacity:0;
}
100% {
opacity:1;
}
}
 @media screen and (max-width: 1500px) {
     .b-popup {
         padding-left: 3rem;
         padding-right: 3rem;
    }
 }
 @media screen and (max-width: 400px) {
    .b-popup {
        padding-left: 2rem;
        padding-right: 2rem;
 }
 }
 /* #popup5.img.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
 } */
.b-popup .row {
    background: gray;
    margin-top: 5rem;
    text-align: center;
}
.img1.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
    height: 400px;
}
.img2.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1KP4m28sOrLOQfJR-0DuJc8XzPyRKv9I9");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
    height: 400px;
}
.img3.col {
    background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -2rem;
    margin-bottom: -2rem;
    height: 400px;
}
/* #popimg1  {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

} */
/* @media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
}

@media screen and (max-width: 650px) {
    .img.col {
    height: 22rem;
    }
} */
/* #img1-1 {
    background-image: url("https://drive.google.com/uc?export=view&id=1RzNfRda0Lr45ETsHSrHvnRHgXq2hL9s0");

}
#img2-2 {
background-image: url("https://drive.google.com/uc?export=view&id=1EieKnhchqW4gTOkFc9-DbQyRBIw_kVMC");

} */
.background.col-sm {
    background-color: #deddd9;
    padding-right: 0;
  padding-bottom: 2rem;
  padding-top: 0rem;
}
@media screen and (max-width: 500px) {
    .background.col-sm {
        padding-right: 1rem;
 }
}
.text.col {
    background-color: white;
    padding: 5rem;
    text-align: left;
    font-size: 14px;
    font-family: 'PTF55F';
    line-height: 2rem;
    /* height: 100%; */
    margin-top: -2rem;
    /* position: absolute; */
}
@media screen and (max-width: 1024px) {
    .text.col {
        padding: 1rem;
 }
}
@media screen and (max-width: 400px) {
    .text.col {
        margin-top: -4rem;
 }
}
.text.col h2 {
font-family: 'PTF55F';
letter-spacing: 1px;
font-weight: normal;

}
.text.col h6 {
letter-spacing: 1px;
font-size: 10px;
text-transform: uppercase;
color: #c58a52;
font-weight: normal;
padding-bottom: 2rem;
}
.b-popup-close a {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    color: #85714C;
    cursor: pointer;
    float: right;
    padding: 10px 30px;
}
.b-popup-close a:after {
 content: "\274c";
 font-size: 14px;
 color: #85714C;
 margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="PopUpShow(1)">
    <div class="popcontainer" id="img1">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup1">
    <div class="b-popup-close">
           <a onclick="PopUpHide(1)">close</a> 

    </div>
       <div class="row">
       <div class="img1 col">
        Это изначально было 0px высоты и его не было видно...
       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt 1</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>



    
<a onclick="PopUpShow(2)">
    <div class="popcontainer" id="img2">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup2">
    <div class="b-popup-close">
           <a onclick="PopUpHide(2)">close</a> 

    </div>
       <div class="row">
       <div class="img2 col">
        Это изначально было 0px высоты и его не было видно...
       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt 2</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>
 


    
<a onclick="PopUpShow(3)">
    <div class="popcontainer" id="img3">
        <div class="pop">
            <div class="poptext">
            <p>Oliver Voogt</p>
            <span>коммерческий директор </span>
            </div>
        </div>
     </div>
</a>


<div class="b-popup" id="popup3">
    <div class="b-popup-close">
           <a onclick="PopUpHide(3)">close</a> 

    </div>
       <div class="row">
       <div class="img3 col">
        Это изначально было 0px высоты и его не было видно...
       </div>
                      <div class="background col-sm"><h2></h2>
                      <div class="row">
                         <div class="text col"><h2>Oliver Voogt 3</h2><h6>коммерческий директор</h6>Почему он используется?
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст...</div> 
                      </div>
           
       </div>
       
   </div>

</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.