Text not showing up on hover over Image - html

Question

Building my portfolio site and trying to show project name on hover over the image. I found some css people use to achieve this but does not work on my site for some reason. What could I be doing wrong?
.portfolioImage-half {
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>

Answer 1

Try using CSS Flexbox. Make your
.text-content a flex container using display: flex;
Give .portfolioImage-half position relative
Give width & height in %ages
Like:
.portfolioImage-half {
position: relative;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
Have a look at the working snippet below:
.portfolioImage-half {
position: relative;
display: inline-block;
margin: 25px 5px;
width: 30%;
background-color: #111;
overflow: hidden
}
.portfolio-half {
width: 100%;
}
.portfolioImg {
transition: all .3s ease-in-out;
}
.portfolioImg:hover {
opacity: .2;
transform: scale(1.1);
cursor: pointer;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
span.text-content span {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
.portfolioImage-half:hover span.text-content {
opacity: 1;
}
<div class="row">
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
<div class="row portfolioRow">
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Doug Fir Digital Logo" class="portfolioImg portfolio-half doug" data-target="#logoDesign">
<span class="text-content"><span>Place Name</span></span>
</div>
<div class="portfolioImage-half">
<img src="http://placehold.it/100x100" alt="Ambe creations logo" class="portfolioImg portfolio-half ambe" data-target="#logoDesign">
</div>
</div>
</div>
</div>
Hope this helps!

Answer 2

No you cannot style the img alt attribute.
Try:
adding a "z-index: 1; position: absolute;" to the .portfolioImage-half:hover span.text-content class.
Then add a "z-index:0; position: relative;" to the .portfolioImage-half class
You will most probably need to position the "span.text-content" element by using "Left"/"Right" properties