##EDIT
##EDIT
EDIT
##EDIT
Agora adaptei para abrir todas as descrições sempre no mesmo lugar. De qualquer forma o link entre o pai e filho sempre será com o data-target/id
porem o elemento com o ID pode estar em qualquer lugar dentro do acordem, então criei uma col-12
para receber esse conteúdo. Deixei comentado no HTML
#accordion {
padding: 80px 0;
}
#accordion .categoria {
position: relative;cursorrelative;
cursor: pointer;
}
#accordion .categoria h2 {
color: #fff;position#fff;
position: absolute;topabsolute;
top: calc(50% - 2rem);width;
width: 100%;text100%;
text-align: center;zcenter;
z-index: 200;
}
#accordion .categoria img {
filter: brightness(0.5);transition;
transition: all 500ms;
}
#accordion .categoria:hover img {
filter: brightness(1);
}
#accordion .categoria .overlay {
width: 100%;height100%;
height: 100%;display100%;
display: block;positionblock;
position: absolute;topabsolute;
top: 0;left0;
left: 0;transition0;
transition: all 500ms;z500ms;
z-index: 100;
}
#accordion .categoria:hover .overlay,
#accordion .active {
background: rgba(151, 2, 2, 0.8);
}
#accordion .categoria .divider {
width: 70%;height70%;
height: 0;display0;
display: block;positionblock;
position: absolute;bottomabsolute;
bottom: 0;text0;
text-align: center;transitioncenter;
transition: all 500ms;z500ms;
z-index: 200;margin200;
margin: 0 17%;background17%;
background: #fff;
}
#accordion .categoria:hover .divider {
height: 17px;
}
#accordion ul {
padding: 0;margin0;
margin: 0;
}
#accordion ul li {
list-style: none;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div id="accordion" class="row">
<div class="col<!-6- colbox com link para descrição -md-3" >
<div class=" <divcol-3">
class="" id=""> <div class="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseExample2">grelhas argentinas</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
</div>
<div id="collapseOne" class="collapse "<div aria-labelledby="headingOne"class=" datacol-parent="#accordion">3">
<div class="">
<div class="categoria" 1data-toggle="collapse" Animdata-target="#collapse4" pariaturaria-expanded="true" clichearia-controls="collap">
reprehenderit, enim eiusmod high life accusamus terry richardson ad squid<img src="https://i.imgur.com/pQcVh9h.png" 3class="img-fluid">
wolf moon
<h2 class="title" officiadata-toggle="collapse" aute,data-target="#multiCollapseExample2" nonrole="button" cupidatataria-expanded="false"
skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
craft<span beerclass="overlay" farmdata-totoggle="collapse" data-table,target="#multiCollapseExample2" rawrole="button" denimaria-expanded="false"
aesthetic synth nesciunt you probably haven't heard of them accusamus
aria-controls="multiCollapseExampl"></span>
labore sustainable<span VHS.class="divider"></span>
</div>
</div>
</div>
<div class="col<!-6- colconteúdo de cada imagem -md-3" >
<div class="" id="">class="col-12">
<div id="collapseOne" <divclass="collapse class="categoria"border id=""" dataaria-toggle="collapse"labelledby="headingOne" data-target="#collapse2" aria-expanded="true"parent="#accordion">
aria-controls="collapse2"><div class="">
<img1 src="https://i.imgur.com/pQcVh9hAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.png" class="img-fluid">3 wolf moon
<h2officia class="title"aute, data-toggle="collapse"non data-target="#multiCollapseExample2"cupidatat role="button"skateboard aria-expanded="false"dolor aria-controls="multiCollapseExample2">grelhasbrunch. argentinasFood 2</h2>truck quinoa nesciunt vice lomo. Leggings occaecat
<spancraft class="overlay"beer datafarm-toggle="collapse" datato-target="#multiCollapseExample2"table, role="button"raw aria-expanded="false"denim aria-controls="multiCollapseExample2"></span>aesthetic synth nesciunt you probably haven't heard of them accusamus
<spanlabore class="divider"></span>sustainable VHS.
</div>
</div>
<div id="collapse2"id="collapse4" class="collapse border " aria-labelledby="heading2"labelledby="" data-parent="#accordion">
<div class="">
2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupi
</div>
</div>
</div>
</div>
</div>
Opção 2 com grid individual
#accordion {padding: 80px 0;}
#accordion .categoria {position: relative;cursor: pointer;}
#accordion .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#accordion .categoria img {filter: brightness(0.5);transition: all 500ms;}
#accordion .categoria:hover img {filter: brightness(1);}
#accordion .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#accordion .categoria:hover .overlay, #accordion .active {background: rgba(151, 2, 2, 0.8);}
#accordion .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#accordion .categoria:hover .divider {height: 17px;}
#accordion ul {padding: 0;margin: 0;}
#accordion ul li {list-style: none;}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div id="accordion" class="row">
<div class="col-6 col-md-3" >
<div class="" id="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
<div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
<div class="">
1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="col-6 col-md-3" >
<div class="" id="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapse2" aria-expanded="true"
aria-controls="collapse2">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas 2</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
<div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
<div class="">
2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupi
</div>
</div>
</div>
</div>
#accordion {padding: 80px 0;}
#accordion .categoria {position: relative;cursor: pointer;}
#accordion .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#accordion .categoria img {filter: brightness(0.5);transition: all 500ms;}
#accordion .categoria:hover img {filter: brightness(1);}
#accordion .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#accordion .categoria:hover .overlay, #accordion .active {background: rgba(151, 2, 2, 0.8);}
#accordion .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#accordion .categoria:hover .divider {height: 17px;}
#accordion ul {padding: 0;margin: 0;}
#accordion ul li {list-style: none;}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div id="accordion" class="row">
<div class="col-6 col-md-3" >
<div class="" id="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
<div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
<div class="">
1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="col-6 col-md-3" >
<div class="" id="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapse2" aria-expanded="true"
aria-controls="collapse2">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas 2</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
<div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
<div class="">
2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupi
</div>
</div>
</div>
</div>
##EDIT
Agora adaptei para abrir todas as descrições sempre no mesmo lugar. De qualquer forma o link entre o pai e filho sempre será com o data-target/id
porem o elemento com o ID pode estar em qualquer lugar dentro do acordem, então criei uma col-12
para receber esse conteúdo. Deixei comentado no HTML
#accordion {
padding: 80px 0;
}
#accordion .categoria {
position: relative;
cursor: pointer;
}
#accordion .categoria h2 {
color: #fff;
position: absolute;
top: calc(50% - 2rem);
width: 100%;
text-align: center;
z-index: 200;
}
#accordion .categoria img {
filter: brightness(0.5);
transition: all 500ms;
}
#accordion .categoria:hover img {
filter: brightness(1);
}
#accordion .categoria .overlay {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transition: all 500ms;
z-index: 100;
}
#accordion .categoria:hover .overlay,
#accordion .active {
background: rgba(151, 2, 2, 0.8);
}
#accordion .categoria .divider {
width: 70%;
height: 0;
display: block;
position: absolute;
bottom: 0;
text-align: center;
transition: all 500ms;
z-index: 200;
margin: 0 17%;
background: #fff;
}
#accordion .categoria:hover .divider {
height: 17px;
}
#accordion ul {
padding: 0;
margin: 0;
}
#accordion ul li {
list-style: none;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div class="container">
<div id="accordion" class="row">
<!-- box com link para descrição -->
<div class=" col-3">
<div class="">
<div class="categoria" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseExample2">grelhas argentinas</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
</div>
<div class=" col-3">
<div class="">
<div class="categoria" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collap">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseEx">grelhas argentinas 2</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false"
aria-controls="multiCollapseExampl"></span>
<span class="divider"></span>
</div>
</div>
</div>
<!-- conteúdo de cada imagem -->
<div class="col-12">
<div id="collapseOne" class="collapse border " aria-labelledby="headingOne" data-parent="#accordion">
<div class="">
1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
<div id="collapse4" class="collapse border " aria-labelledby="" data-parent="#accordion">
<div class="">
2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupi
</div>
</div>
</div>
</div>
</div>
Opção 2 com grid individual
#accordion {padding: 80px 0;}
#accordion .categoria {position: relative;cursor: pointer;}
#accordion .categoria h2 {color: #fff;position: absolute;top: calc(50% - 2rem);width: 100%;text-align: center;z-index: 200;}
#accordion .categoria img {filter: brightness(0.5);transition: all 500ms;}
#accordion .categoria:hover img {filter: brightness(1);}
#accordion .categoria .overlay {width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: all 500ms;z-index: 100;}
#accordion .categoria:hover .overlay, #accordion .active {background: rgba(151, 2, 2, 0.8);}
#accordion .categoria .divider {width: 70%;height: 0;display: block;position: absolute;bottom: 0;text-align: center;transition: all 500ms;z-index: 200;margin: 0 17%;background: #fff;}
#accordion .categoria:hover .divider {height: 17px;}
#accordion ul {padding: 0;margin: 0;}
#accordion ul li {list-style: none;}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<div id="accordion" class="row">
<div class="col-6 col-md-3" >
<div class="" id="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
<div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion">
<div class="">
1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="col-6 col-md-3" >
<div class="" id="">
<div class="categoria" id="" data-toggle="collapse" data-target="#collapse2" aria-expanded="true"
aria-controls="collapse2">
<img src="https://i.imgur.com/pQcVh9h.png" class="img-fluid">
<h2 class="title" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2">grelhas argentinas 2</h2>
<span class="overlay" data-toggle="collapse" data-target="#multiCollapseExample2" role="button" aria-expanded="false" aria-controls="multiCollapseExample2"></span>
<span class="divider"></span>
</div>
</div>
<div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
<div class="">
2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
officia aute, non cupi
</div>
</div>
</div>
</div>
Cara fiz uma adaptação com o Acordeon e ficou muito bom ao meu ver :D, pois ele tem o funcionamento que vc deseja que é abrir Um e fechar os Outros. Dessa forma sempre terá apenas Um aberto. Inclusive como vc pode ver o Acordeon faz parte do componente Collapse oficial do Bootstrap 4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
Cara fiz uma adaptação com o Acordeon e ficou muito bom ao meu ver :D, pois ele tem o funcionamento que vc deseja que é abrir Um e fechar os Outros. Dessa forma sempre terá apenas Um aberto.
Cara fiz uma adaptação com o Acordeon e ficou muito bom ao meu ver :D, pois ele tem o funcionamento que vc deseja que é abrir Um e fechar os Outros. Dessa forma sempre terá apenas Um aberto. Inclusive como vc pode ver o Acordeon faz parte do componente Collapse oficial do Bootstrap 4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example