I have a development div in the footer with a hover effect that expands it. However, it is currently growing underneath the top element on the site. I want it to expand on top or push the element above.
Website:
I've tried using position, float, and other techniques but can't seem to get it right. Can someone please help me?
.developer {
z-index: 99999 !important;
background: rgba(55, 55, 55, 1);
background: -webkit-linear-gradient(45deg, rgba(39, 39, 39, 1) 0%, rgba(39, 39, 39, 1) 20%, rgba(46, 46, 46, 1) 30%, rgba(39, 39, 39, 1) 40%, rgba(39, 39, 39, 1) 60%, rgba(46, 46, 46, 1) 70%, rgba(39, 39, 39, 1) 80%, rgba(39, 39, 39, 1) 100%);
height: 25px;
overflow: hidden;
transition: all 1s ease-in-out;
}
.byfoxdev {
font-family: "montserrat" !important;
padding-top: 3px;
padding-bottom: 2px;
text-align: center;
font-size: 14px;
line-height: 14px;
letter-spacing: 0;
color: white;
}
.developer:hover .foxdevlogo {
background-image: url("https://foxdev.com.br/img/foxdev_footer_110x61.png");
background-repeat: no-repeat, repeat;
width: 110px;
height: 61px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.developer:hover {
height: 85px;
margin-top: -60px;
}
.developer:hover .byfoxdev {
display: visible;
}
.foxdevlogo {
background-image: url("https://foxdev.com.br/img/foxdev_footer_110x38.png");
background-repeat: no-repeat, repeat;
width: 110px;
height: 25px;
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: all 1s ease-in-out;
}
.fa-heart {
color: #D9534F;
}
.fa-mug-hot {
color: #F6E8D6;
}<div class="developer">
<a href="https://foxdev.com.br">
<div class="foxdevlogo">
</div>
</a>
<div class="byfoxdev">Developed with <i class="fas fa-heart"></i> and <i class="fas fa-mug-hot"></i> by foxDev</div>
</div>