1

これがかなり基本的な質問である場合はご容赦ください。Google などを調べましたが、自分に合った解決策が見つかりませんでした。

次のマークアップを使用して画像ギャラリーを生成しています。

<div class="gallery">
  <a class="galleryimg">
    <img>
  </a>
  ....
</div>

ギャラリー内の.galleryimg画像の数に基づいて、 が繰り返されます。左にも浮いています。

:hover選択した画像の輪郭を強調する効果を作成したいと考えています。ボーダー (レイアウトを台無しにする)、アウトライン (原理的には完璧に聞こえる)、インセット ボックス シャドウ (画像の下にレンダリングされる) を使用してみました。

アウトラインは、私が達成したいものに非常に近いです。しかし、右と下の輪郭は、その上に浮いている隣接する画像によって隠されています。

だから私の質問:リンクされた画像のギャラリーにホバーボーダー/アウトライン効果を作成するにはどうすればよいですか?

他の人がこれにどのように取り組んだかについてのアイデアを本当に感謝します。ありがとう！！

編集

画像は隣接しており、間に空白はありません。

4

7 に答える 7

2

こんにちはあなたはこのように単純に使用されたcssトリックを使うことができます

css

#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover                         { border: 3px solid black; }
#example-one a img{width:100px;height:50px;}
#example-one a:hover img                     { margin: -3px;}​

ライブデモhttp://jsfiddle.net/rohitazad/QkT7d/3/

この詳細については、ここをクリックしてくださいhttp://css-tricks.com/examples/InnerBorderImages/#

于 2012-04-16T09:04:33.603 に答える
1

これをチェックしてください：

http://jsfiddle.net/hMNZE/

望ましい効果かもしれません。境界線を考慮して画像自体が小さくなるため、画像にわずかな変化が生じます。しかし、私に知らせてください。これは簡単な修正にすぎません。

- -編集 - -

http://jsfiddle.net/hMNZE/2/

は負のマージンを使用する2番目のバージョンです。これは問題ないように見えますが、画像が少し重なっています。

リンクをチェックしてください：http：//css-tricks.com/examples/InnerBorderImages/

---編集2---

http://jsfiddle.net/hMNZE/3/が最高です

---編集3---

.gallery {
    width:100%;
    height:100%;
    padding:10px;
}

.galleryimg {
    float:left
}

.galleryimg img {
    z-index:-10;
}

.galleryimg img:hover {
    margin:-2px;
    border:2px solid blue;
    z-index:9999;
}​
于 2012-04-16T09:17:50.477 に答える
0

http://jsfiddle.net/Vvr7C/ 秘訣は、.galleryにパディングを追加して、ギャラリーの端にある画像にもアウトラインが表示されるようにすることです。

.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}​
于 2012-04-16T09:04:41.670 に答える
0

ボックスシャドウを使用していて、それが他の画像の下にある場合は、次のように記述します。

.gallery img:hover{
 padding:0;
 box-shaow:0 0 0 2px red;
 z-index:1;
}
.gallery img{position:relative;}
于 2012-04-16T09:18:24.237 に答える
0

あなたの質問が上で答えられたなら、素晴らしいです。そうでない場合は、画像と周囲の他のオブジェクトとの間にマージンが必要なようです。あなたはそれが曖昧だと言いました。目立たなくするには、2 ピクセル程度のマージンが必要な場合があります。

于 2012-04-16T09:27:53.710 に答える
0

box-sizingプロパティ ( からサポートされている)を使用すると、レイアウトを台無しにすることなくIE8境界線を追加できます:hover

.galleryimg {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width : 100px;
    float : left;
}

.galleryimg:hover {
    border  : 3px gray solid;
}

このプロパティの詳細については、 http://paulirish.com/2012/box-sizing-border-box-ftw/を参照してください。

于 2012-04-16T09:04:23.470 に答える
0

こんにちは、 CSS3 * box-shadow * プロパティを使用して、このことを簡単に行うことができます:-

box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9);

理解を深めるためにデモを参照してください:- http://jsbin.com/upedel/5/edit

更新されたアンサー

更新されたデモをご覧ください:- http://jsbin.com/upedel/10/edit

于 2012-04-16T10:18:18.763 に答える