質問
HTML構造
<div id="small_gal">
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
<div><img src="images1.jpg" /></div>
</div>
画像にはドロップシャドウがあります border
それは画像の外側になるので、解決策ではありません
ボーダーは移行しており、FFではスムーズに機能しますが、クロムや他のブラウザでは動作しません
これが私が使用したコードです
#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
content: '';
position: absolute;
width: 112px;
height: 81px;
border: 3px solid #e27501;
left: 9px; top: 9px;
z-index: 9;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
opacity: 1;
}
ノート:
#small_gal
各画像がdivに包まれているため、実装できます。
解決
Firefox 4+は、ような擬似要素の移行をサポートする唯一のブラウザです :before
と :after
.
ソース: http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
他のヒント
CSSの遷移はまだWebKitで実験的であるため、::擬似セレクターの後のエッジケースバグにヒットする可能性があります。私はそれを完全に回避し、ただ移行することをお勧めします border-color
代わりは。これはChromeとSafariで正常に機能しました:
#small_gal div.p {
border: 2px solid transparent;
-webkit-transition: border-color 1s ease-in;
}
#small_gal div.p:hover {
border-color: orange;
}
以下のような擬似要素でCSS遷移を使用できます。 inherit
擬似要素で。したがって、あなたの場合は、 opacity
, 、に移行することができます border-color
.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#small_gal div {
border-color: transparent;
cursor: pointer;
display: inline-block;
position: relative;
-webkit-transition: border-color 0.5s ease-in-out;
-moz-transition: border-color 0.5s ease-in-out;
-o-transition: border-color 0.5s ease-in-out;
-ms-transition: border-color 0.5s ease-in-out;
transition: border-color 0.5s ease-in-out;
}
#small_gal div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-color: inherit;
border-style: solid;
border-width: 3px;
left: 0;
top: 0;
}
#small_gal div:hover {
border-color: #e27501;
}
#small_gal div img {
display: block;
height: auto;
max-width: 150px;
width: auto;
}
<div id="small_gal">
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
<div><img src="//c2.staticflickr.com/6/5826/23633880170_4bb8492de8_z.jpg" /></div>
</div>
所属していません StackOverflow