Hide/show text on hover - html

Question

Hello I'm trying to hide / display an absolute positioned text on image hover with transform scale effect and shadowing background I had some problems with z-index and div containers. What I'm trying to achive is:
Before hover:
On hover:
I know I could wrap text into div and then change visibility or display css property on hover but it doesn't work for me. Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-lg-4 column" *ngFor="let clientProject of clientProjects; let i= index">
<button class="btn button-modal" data-toggle="modal" [attr.data-target]="'#' + i">
<span class="hidden-text">TEXT</span>
<img src="{{clientProject.clickImageButtonPath}}" class="img-fluid image">
</button>
</div>
</div>
</div>
css:
.image {
width: 100%;
height: 400px;
transition: all 0.3s ease-in-out;
z-index: 1;
opacity: 0.35;
}
.button-modal {
padding: 0 !important;
overflow: hidden;
background-color: black;
}
.button-modal:hover {
padding: 0 !important;
}
.hidden-text:hover + .image,
.image:hover {
transform: scale(1.2);
}
.column {
margin: 0 !important;
border: none;
padding: 0 !important;
}
.hidden-text {
display: block;
z-index: 2;
color: white;
font-size: 2rem;
border: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
position: absolute !important;
}
Could someone help with this please?

Answer 1

I'm not sure what you're trying to do exactly, so I think it would be good to figure out what element you want to trigger the action on, then tell that element to hide and show the text. I'm also not sure if you're trying to do this all CSS or not, but I would typically do something like this. Be aware that this is jQuery, which I assume you're using if you're using bootstrap, and this is just an example of what you can do with a simple bit of jQuery code in this example. Here's a link to a working fiddle http://jsfiddle.net/aq9Laaew/110775/ and here's the code I used to achieve the result:
$('.button-modal').hover(function(event){
$(this).find('.hidden-text').show();
},function(){
$(this).find('.hidden-text').hide();
});
jQuery hover handler is actually 2 functions inside, one for mouseover (hover start) and one for mouseout (hover end), and it makes this easy, so you can do one thing on the start (show your text) and another on the end (hide your text) all in a nice little packaged function. You can also split these out and do mouseover and mouseout individually. I would also edit your CSS a little if you're going to use this approach, like this:
.button-modal:hover {
padding: 0 !important;
transform: scale(1.2);
}
.column {
margin: 0 !important;
border: none;
padding: 0 !important;
}
.hidden-text {
display: none;
z-index: 2;
color: white;
font-size: 2rem;
border: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
position: absolute !important;
}

Answer 2

Try this:
<style type="text/stylesheet">
.container:hover #cts {
display: block;
}
</style>
<div class="container">
<div class="img" style="position: absolute; width: 500px; height: 500px; z-index:0;">
<img src="https://i.stack.imgur.com/Az76Y.png"></img>
</div>
<div id="cts" class="text-box" style="display: none; position: absolute; display: table; margin-left: auto; margin-right: auto; background: rgba(0,0,0,0.4); text-align: center; height: 500px; width: 500px; z-index: 1; transition: all .3s ease;">
<div class="text-box-inner" style="display: table-cell; height: 500px; width: 500px; vertical-align: middle; margin-left: auto; margin-right: auto;">
<span class="text" style="color: #fff;">ANY TEXT</span>
</div>
</div>
</div>
<script type="text/javascript">