I have been attempting to create a hover animation transition on my website. It seems to work fine in Opera and Chrome, but not in Mozilla Firefox. Can anyone provide guidance on how to fix this issue? Here is the code I am currently using:
HTML
<a href="">
<div class="teams back"></div>
</a>
CSS
.teams{
display: table-cell;
background-size: cover;
background-position:center;
width: 360px;
height: 370px;
transition:1s;-webkit-transition:1s;-moz-transition:opacity 1.0s;-o-transition:1s;
}
#teams .back{background-image: url("link");}
#teams .back:hover{background-image:url("link");}
I have created a JSFiddle demo for reference.