このページの CSS3 トランジション効果は、 IE 以外のすべてのブラウザーで完全に機能します。また、サムネイルの上部と左側に境界線を追加します。すべての要素の境界線を 0 にしようとしましたが、それでも解決しませんでした。cssは下図の通りです。
.slide-up-boxes .showbox a {
display: block;
margin: 0 0 20px;
height: 157px;
overflow: hidden;
width: 315px;
float: left;
border:none;
padding: 0px;
background: transparent;
}
.slide-up-boxes .showbox img {
color: #333;
text-align: center;
margin-right: 15px;
width: 315px;
float: left;
height: 157px;
font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */
zoom: 1;
filter: alpha(opacity=45);
opacity: 0.5;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.showbox a:hover img {
margin-top: -155px;
opacity: 0;
height: 157px;
width: 315px;
}
.showbox object {
color: white;
background: #393838;
font: 12px/15px Georgia, Serif;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
width: 314px;
float: left;
height: 154px;
border: none;
padding: 0px;
margin: 0px 15px 0px 0px;
}
.slide-up-boxes .showbox a:hover object {
opacity: 1;
width: 314px;
border: none;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
zoom: 1;
}
.slide-up-boxes .showbox#show1 object {
background: url(images/huethumb.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show2 object {
background: url(images/pizzathumb.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show3 object {
background: url(images/rickolthumb.jpg) ;
padding-top: 110px;
border: none;
}
.slide-up-boxes .showbox#show4 object {
background:url(images/bernie-thumber.jpg) ;
padding-top: 110px; zoom: 1;
background-repeat: no-repeat;
border: none;
}
.slide-up-boxes .showbox#show5 object {
background: url(images/nollythumb.png) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show6 object {
background:url(images/photothumg.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show7 object {
background:url(images/tradersthumb.png) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show8 object {
background:url(images/wpbathumb.jpg);
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show9 object {
background:url(images/peterthumb.png);
padding-top: 110px;
zoom: 1;
border: none;
}