<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row pt-5">
<div class="col-md-2 col-xs-12">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active show" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Donec vel </a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Fusce dictum </a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Praesent convallis</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Class aptent tacit</a>
</div>
</div>
<div class="col-md-10 col-xs-12">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade active show pb-4" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="row no-gutters">
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec1');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Image">
<div class="overlay">
<div class="content">
<h6>Lorem ipsum dolor sit amet</h6>
</div>
</div>
</a>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec2');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Boat">
<div class="overlay">
<div class="content">
<h6>Aenean in accumsan ligula</h6>
</div>
</div>
</a>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec3');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Leaves">
<div class="overlay">
<div class="content">
<h6>Nam vel luctus arcu</h6>
</div>
</div>
</a>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec4');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Rocks">
<div class="overlay">
<div class="content">
<h6>Phasellus risus orci</h6>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-12">
<div id="sec1" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam non lorem rutrum blandit a a metus. Cras sollicitudin eleifend interdum.
Maecenas accumsan felis urna, id sollicitudin lectus porttitor sed. Etiam posuere non magna quis sollicitudin. Integer maximus tortor eu
dignissim efficitur. Suspendisse ac ullamcorper libero.</p>
</div>
</div>
</div>
<div id="sec2" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Aenean in accumsan ligula</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Etiam sit amet arcu at felis sollicitudin porttitor eu vitae ligula. Nunc convallis, quam nec ullamcorper tempor, purus nulla tristique
elit, id pellentesque massa enim ut massa. Donec ut turpis quis ante varius eleifend vel nec enim.</p>
</div>
</div>
</div>
<div id="sec3" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Nam vel luctus arcu</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam non lorem rutrum blandit a a metus. Cras sollicitudin eleifend interdum.
Maecenas accumsan felis urna, id sollicitudin lectus porttitor sed. Etiam posuere non magna quis sollicitudin. Integer maximus tortor eu
dignissim efficitur. Suspendisse ac ullamcorper libero.</p>
</div>
</div>
</div>
<div id="sec4" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Phasellus risus orci</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Etiam sit amet arcu at felis sollicitudin porttitor eu vitae ligula. Nunc convallis, quam nec ullamcorper tempor, purus nulla tristique
elit, id pellentesque massa enim ut massa. Donec ut turpis quis ante varius eleifend vel nec enim.</p>
</div>
</div>
</div>
<div id="sec5" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Cras at interdum arcu</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam non lorem rutrum blandit a a metus. Cras sollicitudin eleifend interdum.
Maecenas accumsan felis urna, id sollicitudin lectus porttitor sed. Etiam posuere non magna quis sollicitudin. Integer maximus tortor eu
dignissim efficitur. Suspendisse ac ullamcorper libero.</p>
</div>
</div>
</div>
<div id="sec6" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Curabitur felis velit</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Etiam sit amet arcu at felis sollicitudin porttitor eu vitae ligula. Nunc convallis, quam nec ullamcorper tempor, purus nulla tristique
elit, id pellentesque massa enim ut massa. Donec ut turpis quis ante varius eleifend vel nec enim.</p>
</div>
</div>
</div>
<div id="sec7" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Donec vel porta arcu</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam non lorem rutrum blandit a a metus. Cras sollicitudin eleifend interdum.
Maecenas accumsan felis urna, id sollicitudin lectus porttitor sed. Etiam posuere non magna quis sollicitudin. Integer maximus tortor eu
dignissim efficitur. Suspendisse ac ullamcorper libero.</p>
</div>
</div>
</div>
<div id="sec8" class="picture" style="display:none">
<div class="row py-4">
<div class="col-md-3">
<h3>Mauris at posuere lacus</h3>
</div>
<div class="col-md-9">
<img class="img-fluid" src="https://via.placeholder.com/683x383" alt="Lotus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec quam non lorem rutrum blandit a a metus. Cras sollicitudin eleifend interdum.
Maecenas accumsan felis urna, id sollicitudin lectus porttitor sed. Etiam posuere non magna quis sollicitudin. Integer maximus tortor eu
dignissim efficitur. Suspendisse ac ullamcorper libero.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec5');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Rocks">
<div class="overlay">
<div class="content">
<h6>Cras at interdum arcu</h6>
</div>
</div>
</a>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec6');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Rocks">
<div class="overlay">
<div class="content">
<h6>Curabitur felis velit</h6>
</div>
</div>
</a>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec7');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Rocks">
<div class="overlay">
<div class="content">
<h6>Donec vel porta arcu</h6>
</div>
</div>
</a>
</div>
<div class="col-3">
<a href="javascript:void(0)" class="myhover" onclick="openImg('sec8');">
<img class="img-fluid" src="https://via.placeholder.com/300" alt="Rocks">
<div class="overlay">
<div class="content">
<h6>Mauris at posuere lacus</h6>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.</p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.</p>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
.content{
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
color: #fff;
text-transform: uppercase;
}
.content h6{
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
text-align: center;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .2s ease;
background-color: rgba(0,0,0,0.5);
}
.myhover:hover .overlay{
opacity: 1;
}
openImg("sec1");
function openImg(imgName) {
var i, x;
x = document.getElementsByClassName("picture");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(imgName).style.display = "block";
}
