I have a div that is styled as a circular shape with an image and text centered inside of it. The circle and image are visible while the text is transparent until hovered over. When hovering, the circle border flashes, the image's opacity decreases, and the text becomes visible.
Testing this code in Firefox works perfectly as intended, but in Chrome, the hover effects persist even after moving the cursor away (the image remains dimmed and the text stays visible). Hovering back on the div makes the border flash correctly.
Although I have included all the necessary webkit/moz/ms/o transitions and animations, there seems to be an issue specifically with Chrome. Any suggestions on how to fix this inconsistency?
The code for the div and its elements is:
<div class='players'>
<div class='row'>
<div class='span6'>
<div class='matchup'>
<p class='team'>SOMETEAMNAME</p>
<p class='name'>SOMENAME</p>
<img src='SOMEIMAGE'>
</div>
</div>
</div>
</div>
The CSS code used:
.matchup {
width: 250px;
height: 250px;
background: transparent;
border: 1px solid #ff6600;
border-radius: 125px;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.matchup img {
position: static;
margin-top: -22%;
opacity: 1;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.matchup p {
font-family: 'Lobster', cursive;
position: relative;
text-align: center;
top: 50%;
color: transparent;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.team {
font-size: 25px;
}
.name {
font-size: 45px;
}
.map {
font-size: 15px;
margin-top: -70%;
}
.matchup:hover {
-webkit-animation: matchup-active 1s infinite;
-moz-animation: matchup-active 1s infinite;
-ms-animation: matchup-active 1s infinite;
-o-animation: matchup-active 1s infinite;
animation: matchup-active 1s infinite;
p {
color: #ff6600;
}
img {
opacity: 0.2;
}
}
@-webkit-keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
@-moz-keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
@-o-keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
@keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
UPDATE: A jsfiddle link has been added for reference: http://jsfiddle.net/sicophrenic/qvJ94/. Please note that it may not be perfectly styled, but the issue with Chrome can be observed while it works fine in Firefox.