how can i hide the copy hover

Question

I was trying to hide hover.which is the hidden part already if I change color of .wokcen, it reflects again ! I've found around Stack overflow, yet none seem to do the trick please someone help me out!

https://jsfiddle.net/shaik_aswad6/djqtx86s/

this is my code

<style type="text/css">.price1
{
    background:url(Device_Price2.jpg) no-repeat; width:300px; height:280px; text-align:center; position: relative;
}
.up
{
    bottom:0px; 
    position:absolute;
    width:300px;
    height:20%;
    background-color:#000000;
    opacity: 0.5;
    filter: alpha(opacity=50);

}
.wokcen
{
    font-size:125%;
    font-weight:700;
    color:#ffffff;
    margin:5%;
    opacity:1;
    /*margin:auto ;
*/
    text-align:center;


}

.up:hover
{
    height:100%;
    background-color:#000000;
    opacity: 0.6;
    filter: alpha(opacity=60);
    text-align:center; transition: .4s;
    display: block;
}



.up:hover .wokcen {
    display: block;
    z-index: 200;
}
.priceinformation
{
    display: block;
    font-size:13px;
    padding:15px;

}

</style>

<div class="price1">
                <div class="up">
                    <div class="wokcen">Get Your Device Price <span class="priceinformation">Select your device & we'll help you unlock the best selling price based on the present conditions of your gadget & the current market price.</span>
                    </div>
                 </div>

thank you

Answer 1

You can use overflow: hidden to the .up class so that it is hidden then on hover it will release the hidden part overflow to visible. here below the fiddle If i got your question right.

Fiddle