html - CSS div using 'position absolute' hides content -

i trying have corner button display new content on hover using following setup:

<div class="panel panel-default1">     <div class="panel-body">         <div class='amg-corner-button_wrap'>                         <div class="overlay"></div>             <div class="overlay-content">                 <h2>image ink logo</h2>                 <p>logo screen printing company. wanted detachable/recognizable brand didn't need name of company.</p>             </div>         </div> <!-- wrap -->     </div> <!-- panel body --> </div> <!-- panel default --> 

css:

.panel-default1 {     padding-top: 10px;     border-radius: 20px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);     height: 400px;     width: 100%;     overflow: hidden;     margin: 0 auto;     position: relative; }  .amg-corner-button_wrap {     display: block;     position: absolute;     bottom: 0;     right: 0;     width: 40px;     height: 40px; }  .amg-corner-button_wrap .overlay {     border-bottom: 40px solid #e8c63d;     border-left: 40px solid transparent;     bottom: 0;     height: 0;     opacity: .95;     position: absolute;     right: 0;     text-indent: -9999px;     -moz-transition: 0.5s ease-out;     -o-transition: 0.5s ease-out;     -webkit-transition: 0.5s ease-out;     transition: 0.5s ease-out;     width: 0; }  .amg-corner-button_wrap:hover .overlay {     border-bottom: 800px solid #e8c63d;     border-left: 800px solid transparent;     -moz-transition: 0.5s ease-out;     -o-transition: 0.5s ease-out;     -webkit-transition: 0.5s ease-out;     transition: 0.5s ease-out; }  .amg-corner-button_wrap .overlay-content {     bottom: 0;     color: #333;     left: 0;     opacity: 0;     padding: 30px;     position: absolute;     right: 0;     top: 0;     -moz-transition: 0.3s ease-out;     -o-transition: 0.3s ease-out;     -webkit-transition: 0.3s ease-out;     transition: 0.3s ease-out; } .amg-corner-button_wrap .overlay-content h2 {     border-bottom: 1px solid #333;     padding: 0 0 12px; } .amg-corner-button_wrap:hover .overlay-content {     opacity: 1;     -moz-transition: 0.3s ease-out;     -o-transition: 0.3s ease-out;     -webkit-transition: 0.3s ease-out;     transition: 0.3s ease-out;     -moz-transition-delay: 0.3s;     -o-transition-delay: 0.3s;     -webkit-transition-delay: 0.3s;     transition-delay: 0.3s; } 

here fiddle : https://jsfiddle.net/ar3jkuvq/

the hover deployment works .overlay-content text not show if .amg-corner-button_wrap uses position: absolute. need keep hover on wrap only.

how can keep hover effect on wrap , show text content @ same time?

you can use css3 transform property scale overlay instead of using border, , use general sibbling combinator [w3] selector ~ select .overlay-content element preceded .amg-corner-button_wrap:hover.

working fiddle