As you hover over the box, two buttons will appear. However, when tabbing for accessibility, the buttons appear without pushing up the content inside the div.
Tabbing to a link within the description div causes the img-block class div to be pushed up. Why is this happening and how can it be fixed?
#square .square-wrapper-inner {
height: 50%; /* Changed from 100%*/
width: 100%;
position: absolute;
z-index: 9999;
top: 250px; /* Changed from 600 */
padding: 15px 20px;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;
-o-transition: 0.1s;
transition: 0.1s;
background: rgba(255, 0, 0, 0.8) !important;
box-sizing: border-box;
}
#square {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#square h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
width: 100%;
text-align: center !important;
font-family: "Merriweather", serif !important;
font-size: 20px !important;
letter-spacing: 0.8px;
line-height: 24px !important;
color: #fff !important;
text-shadow: 0 0 7px rgb(0, 0, 0);
font-weight: 700 !important;
}
#square .description a {
display: block;
padding: 10px 20px;
background-color: #000 !important;
color: #fff !important;
text-decoration: none;
text-align: center !important;
font-family: "Karla", sans-serif !important;
font-size: 14px !important;
margin-bottom: 10px;
}
#square .description a:hover,
#square .description a:focus {
color: #fff;
}
#square .description a:first-child {
text-transform: uppercase;
}
#square img {
width: 250px;
height: 250px;
object-fit: cover;
object-position: top;
}
#square .square-wrapper {
overflow: hidden;
position: relative;
width: 250px;
height: 250px;
}
#square .square-wrapper:hover .square-wrapper-inner,
#square .square-wrapper:focus .square-wrapper-inner {
top: 50%;
}<div id="square">
<div class="square-wrapper">
<div class="img-block" style="background-color: #000; width: 250px; height: 250px;" >
<h2>Box Title</h2>
</div>
<div class="square-wrapper-inner">
<div class="description">
<a href="#">Link #1</a>
<a href="#">Link #2</a>
</div>
</div>
</div>
</div>