I have noticed that when hovering over the containers, they briefly turn blue before displaying their hover color (dark gray). I suspect this behavior is due to them being links. I wanted the entire box to be clickable, which is why I wrapped the boxes in a link tag.
Is there a different way to achieve this effect without encountering the blue background flicker during hover?
#info {
max-width: 80%;
height: auto;
}
#info-container {
padding: 10px 10% 200px 10%;
margin: 50px 10%;
}
.box {
width: 20%;
height: 300px;
opacity:1;
position: absolute;
line-height: 1.5em;
}
#green, #yellow, #red {
box-shadow: inset 0 0 0 0;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#green {
background: #3e745b;
left: 15%;
}
#yellow {
background: #6f9697;/*#f3db6d*/
left: 40%;
}
#red {
background: #3e745b;
left: 65%;
}
#green:hover, #yellow:hover, #red:hover {
/*box-shadow: inset 0 300px 0 0 #6f9697;*/
box-shadow: inset 0 300px 0 0 #303030;
}
#green.green{animation:slideinGreen .5s ease}
#yellow.yellow{animation:slideinYellow 1.3s ease}
#red.red{animation:slideinRed 2s ease}
#green.active,#red.active,#yellow.active{opacity: 1}
@keyframes slideinGreen {
from {
left: calc(25% - 250px);opacity:1;
}
}
@keyframes slideinYellow{
from {
left: calc(45% - 350px);opacity:1;
}
}
@keyframes slideinRed {
from {
left: calc(65% - 450px);opacity:1;
}
}
.info-box-title, .info-box-description {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 90%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #FFF;
line-height: 1.4em;
}
.info-box-title {
font-size: 2em;
}
.box:hover .info-box-title {
display: none;
}
.info-box-description {
display: none;
font-size: 1.5em;
width: 75%;
line-height: 1.5em;
}
.box:hover .info-box-description {
display: block;
}<section id="info">
<article id="info-container">
<a href="projects"><div id="green" class="box">
<div class="info-box-title">PROJECT AFTER PROJECT</div>
<div class="info-box-description">Over 60 years of accumulated projects.</div>
</div></a>
<a href="about"><div id="yellow" class="box">
<div class="info-box-title">YEARS OF DEMOLITION HISTORY</div>
<div class="info-box-description">Find out about - The Eslich Wrecking Company.</div>
</div></a>
<a href="contact"><div id="red" class="box">
<div class="info-box-title">GET IN TOUCH WITH US</div>
<div class="info-box-description">Contact us for more information.</div>
</div></a>
</article>
</section>