Hiding image and showing text area when hovering with Flexbox - html

Question

I have a div, containing an image, and another div below it for description, am aligning them on top of each other with flexbox, however I have a hidden div that I want to show in place of the image when I hover over the tile, but currently my code is just not working and am unable to give this div the full height of the area on hover. Here's my code:
:root{
--colorOrange: #ef5b2b;
--colorGrey: #f5f5f5;
--colorBlue: #0a2756;
}
.presenter {
width: 23%;
max-height: 320px;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
.presenter img{
width: 100%;
}
.presenter-solid{
background: var(--colorBlue);
color: white;
font-weight: 700;
text-transform: uppercase;
font-family: Poppins;
display:none;
}
.presenter:hover img{
display:none;
}
.presenter:hover .presenter-solid{
display:block;
height: 100%;
}
<div class="presenter">
<div class="presenter-image-holder">
<img src="https://cdn2.vectorstock.com/i/thumb-large/80/91/person-gray-photo-placeholder-little-boy-vector-22808091.jpg" />
<div class="presenter-solid">
<span>TOM CRUISE</span>
</div>
</div>
<div class="presenter-role">
<span class="role-name">Hollywood Actor</span>
</div>
</div>
It's also giving me a flicker effect when trying to hover. How can I fix my code? What am I doing wrong?

Answer 1

use display: flex; align-items: center; justify-content: center to center the text.
:root{
--colorOrange: #ef5b2b;
--colorGrey: #f5f5f5;
--colorBlue: #0a2756;
}
.presenter {
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.presenter-image-holder {
position: relative; /* this must be added to the parent element */
width: 250px; /* width of the image box */
height: 250px; /* height of the image box */
margin-bottom: 10px;
}
.presenter img{
max-width: 100%;
height: auto;
}
.presenter-solid{
background: var(--colorBlue);
color: white;
font-weight: 700;
text-transform: uppercase;
font-family: Poppins;
display:none;
}
.presenter:hover img{
display:none;
}
.presenter:hover .presenter-solid{
height: 100%;
width: 100%;
display: flex;
align-items: center; /* to vertically center the text */
justify-content: center; /* to horizontally center the text */
}
<div class="presenter">
<div class="presenter-image-holder">
<img src="https://cdn2.vectorstock.com/i/thumb-large/80/91/person-gray-photo-placeholder-little-boy-vector-22808091.jpg" />
<div class="presenter-solid">
<span>TOM CRUISE</span>
</div>
</div>
<div class="presenter-role">
<span class="role-name">Hollywood Actor</span>
</div>
</div>