Is this what you’re looking for?
<!DOCTYPE html>
<html>
<head>
<style>
#custom-grad {
background-image: linear-gradient(to bottom right, #81bde0, #e1edf4);
}
.white {
background-color: white;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body,
html,
.columnContainer {
height: 80%;
}
.columnContainer {
display: table;
margin-left: auto;
margin-right: auto;
width: 90%;
}
.columnContainer > section {
width: 15%;
display: table-cell;
-webkit-transition: width 0.5s linear;
transition: width 0.5s linear;
}
.columnContainer:hover > section:hover {
width: 30%;
}
.columnContainer:hover > section:hover > img:first-child {
opacity: 0.5;
}
.columnContainer:hover > section {
width: 15%;
}
.columnContainer > section:nth-of-type(1) {
background-color: rgba(200, 200, 250, 0.5);
}
.columnContainer > section:nth-of-type(2) {
background-color: rgba(200, 250, 200, 0.5);
}
.columnContainer > section:nth-of-type(3) {
background-color: rgba(250, 200, 200, 0.5);
}
.columnContainer > section:nth-of-type(4) {
background-color: rgba(200, 225, 225, 0.5);
}
.columnContainer > section:nth-of-type(5) {
background-color: rgba(225, 200, 225, 0.5);
}
</style>
</head>
<body id="custom-grad">
<div style="height:400px;">
<div class="row columnContainer">
<section id="1" class="col ">
<div class="white" onmouseover="mouseover();" onmouseout="mouseout();">
<div class="img d-flex justify-content-center">
<img id="img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fuwosh.edu%2Fstudenthealth%2Fwp-content%2Fuploads%2Fsites%2F26%2F2016%2F08%2Fanonymous-headshot.jpg&f=1&nofb=1" style="width: 100%; height:100%; ">
<p>Name</p>
<p>Title</p>
</div>
<div id="text" style="background-color: white; display:none"> <span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus, mauris id tincidunt interdum, erat nisl eleifend lectus, quis pulvinar sem nunc non felis. Nam elit ligula, euismod a semper ut, convallis nec urna. Ut feugiat arcu quis justo efficitur, eu aliquet ipsum tempus. Fusce non ante eget quam malesuada hendrerit. Vivamus diam nulla, mollis id tincidunt ut, fermentum id ex.
</span>
</div>
</div>
</section>
<section class="col">
One of three columns
</section>
<section class="col">
One of three columns
</section>
<section class="col">
One of three columns
</section>
<section class="col">
One of three columns
</section>
</div>
</div>
<script src="app.js"></script>
<script>
function mouseover() {
var img = document.getElementById("img");
img.style.display="none";
var text=document.getElementById("text");
text.style.display="block";
}
function mouseout() {
var img = document.getElementById("img");
img.style.display="block";
var text=document.getElementById("text");
text.style.display="none";
}
</script>
</body>
</html>