Подскажите пожалуйста :-), как сделать так, чтоб верхний длинный блок исчез? Уже промучался с блоками и никак не выходит его убрать. Как пытаюсь его убрать - сразу вся сетка слетает. Увы в сетках пока токо начинающий...((
Сейчас сетка такая:
.wrapper {
margin: 0 0 20px 0;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 300px); /*размер ячеек*/
grid-template-rows: repeat(4,180px);/*высота ячеек*/
justify-content: center;
align-content: end;
}
.box { display:block;overflow: hidden;
background-color: #444;
color: #fff;
border:1px solid grey;
border-radius: 5px;
font-size: 150%;
}
.item2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.item3 {
grid-column: 1 / 5;
}
.effect-7 {
position: relative;
margin-bottom: 30px;
}
.effect-7 .effect-img {
position: relative;
font-size: 0;
}
.effect-7 .effect-img img {
position: relative;
width: 100%;
height: auto;
transform: scale(1.2);
left: -15px;
transition: .5s;
}
.effect-7:hover .effect-img img {
transform: scale(1.2);
left: 0;
}
.effect-7 .effect-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
display: flex;
justify-content: center;
flex-direction: column;
background: rgba(0, 0, 0, .1);
transition: .5s;
}
.effect-7 .effect-text h2 {
position: relative;
color: #ffffff;
font-size: 20px;
margin-bottom: 10px;
padding-bottom: 15px;
}
.effect-7 .effect-text h2::after {
position: absolute;
content: "";
width: 30px;
height: 3px;
left: 0;
bottom: 0;
background: #ffffff;
transition: .5s;
}
.effect-7 .effect-text p {
position: relative;
color: #ffffff;
font-size: 15px;
margin: 0;
left: calc(-100% - 30px);
opacity: 0;
transition: .5s;
}
.effect-7 .effect-text:hover h2::after {
width: 100%;
}
.effect-7 .effect-text:hover p {
left: 0;
opacity: 1;
}
<div class="wrapper">
<div class="box item2">
<div class="effect-7">
<div class="effect-img">
<img height="240px" src="ijijimgdf/sad/bat.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div>
</div>
<div class="box item3"> <div class="effect-7">
<div class="effect-img">
<img height="240px" src="https://static.onecms.io/wp-content/uploads/sites/20/2020/09/11/nature.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
<div class="box item4"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="ijijimgdf/menu/old.png" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
<div class="box item5"> <div class="effect-7">
<div class="effect-img">
<img height="240px" src="ijijfiles/swfcas/fung.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
<div class="box item6"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="ijijimgdf/story/med1.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
<div class="box item7"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
<div class="box item8"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="https://static.onecms.io/wp-content/uploads/sites/20/2020/09/11/nature.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div> <div class="box item9"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
<div class="box item10"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div> <div class="box item11"><div class="effect-7">
<div class="effect-img">
<img height="240px" src="ontent/uploads/2014/11/PROD-Adolf-Hitler-whrend-einer-Rede.jpg" alt="Team Image">
</div>
<div class="effect-text">
<h2>This is heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed purus consectetur, interdum felis in, auctor ligula.</p>
</div>
</div></div>
</div>
А нужно, чтобы получилась без верхнего длинного блока, как на рисунке: