Linked container's hover shows blue during transition - html

Question

I have three containers that act as links. For some reason whenever you hover over them the blocks turn blue for a second and then go to their hover color (dark gray). The only thing I could think of why it is doing it is because it is a link. I want the whole box to be a link and that is the reason I wrapped the boxes with the link.
Is there an alternative method to doing this and what is causing the blue background when hovered?
#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>

Answer 1

Reason:
Currently, you are not specifying the color for the box-shadow in the un-hovered state.
#green, #yellow, #red {
box-shadow: inset 0 0 0 0; /* there is no color specified */
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
transition: all ease 0.3s;
}
If it is not specified, most browsers use the current color. Below is the extract from MDN: (emphasis mine)
<color>
See <color> values for possible keywords and notations.
If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.
The above means that in the default state, the color of the shadow is the element's default color and on hover it transitions from that default color to the color that you've specified (because all properties are being transitioned) and hence you see the blue color.
For a tags, the default color in most browsers is blue (it is color: rgb(0, 0, 238); in Chrome). The div which has the box-shadow has no explicit color specified and so it would inherit parent's color.
Solution: Set the expected color to the box-shadow in its un-hovered state also.
#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 #303030;
-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>