I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none of them seem to fix my issue. Any suggestions?
HTML:
<div class="image-list cf">
<figure>
<a href="javascript:return false;">
<img src="image-src-1"/>
</a>
<span>
<a href="javascript:return false;">File Name 1</a>
</span>
<span>
10 Images
</span>
</figure>
<figure>
<a href="javascript:return false;">
<img src="image-src-1"/>
</a>
<span>
<a href="javascript:return false;">File Name 1</a>
</span>
<span>
10 Images
</span>
</figure>
<-- and more -->
</div>
CSS:
/* images list
**********************************************************/
.image-list {}
.image-list figure {
float: right;
width: 180px;
border: 1px solid;
border-color: #aaa;
border-radius: 0;
box-shadow:
1px 0 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 2px #000;
margin-right: 29px;
text-align: center;
padding: 10px 0;
background-color: #fff;
-webkit-transition: all .3s ease 0s;
-moz-transition: all .3s ease 0s;
-o-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
.image-list figure:hover{
border-color: #666;
box-shadow:
1px 0 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 10px #000;
}
[class="image-list"] figure:hover {
border-color: #666;
box-shadow:
1px 0 0 #fff,
0 1px 0 #fff,
-1px 0 0 #fff,
0 -1px 0 #fff,
0 0 10px #000;
}
.image-list figure a {}
.image-list figure a img {}
.image-list figure span {
display: block;
padding: 5px 0;
width: 160px;
margin: 0 auto;
overflow: hidden;
height: 1em;
}
.image-list figure span a {}