Hide/show Text On Hover

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 containe

Solution 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;
}

Solution 2:

Try this:

<styletype="text/stylesheet">.container:hover#cts {
    display: block;
  }
</style><divclass="container"><divclass="img"style="position: absolute; width: 500px; height: 500px; z-index:0;"><imgsrc="https://i.stack.imgur.com/Az76Y.png"></img></div><divid="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;"><divclass="text-box-inner"style="display: table-cell; height: 500px; width: 500px; vertical-align: middle; margin-left: auto; margin-right: auto;"><spanclass="text"style="color: #fff;">ANY TEXT</span></div></div></div><scripttype="text/javascript">