I am a beginner in this field.
Initially, I used jQuery to create three divs (buttons) that slid down when the page loaded. I also added an expansion effect on mouseover. This method worked fine in Safari but not in Firefox. So I made some modifications.
Now, I have implemented CSS animations for the hover effect and used a jQuery function to make the buttons slide down on load. However, there seems to be an issue with the slideDown functionality.
Here is the HTML code:
<div class="header">
<div class="button_container">
<a href = "../index.htm"><div class="header_button home_button">Back to Home</div></a>
<a href = "../Projects/projects.htm"><div class="header_button projects_button">Projects</div></a>
<a href = "../Resume/resume.htm"><div class="header_button resume_button" >Resume</div></a>
</div>
</div>
This is the CSS code:
.header_button {
display: inline-block;
height: 130px;
line-height: 130px;
width: 300px;
background-color: lightgrey;
color: black;
box-shadow: 0 0 10px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
.header_button:hover {
background-color: lightyellow;
height: 140px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
I gathered information from various sources, including Stack Overflow, to achieve the desired hover-expand effect.
And here is the jQuery code:
$(document).ready(function() {
$('.header_button').hide().slideDown('slow');
});