web-dev-qa-db-ja.com

ホバーで画像の上にFont Awesomeアイコンを中央に配置

マウスが画像の上にあるときに、画像の上にフォントの素晴らしいアイコンを配置しようとしています。これが私のHTMLです。

<div class="profile-img-container">
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <i class="fa fa-upload fa-5x"></i>
</div>

そして私のCSS：

.profile-img-container {
    position: relative;
}

.profile-img-container img:hover {
    opacity: 0.5;
}

.profile-img-container img:hover + i {
    display: block;
    z-index: 500;
}

.profile-img-container i {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

ただし、フォントの素晴らしいアイコンが左端まで表示され、画像にカーソルを合わせるとアイコンがちらつきます。これが私のJSFiddleです： http://jsfiddle.net/fns8byfj/1/

htmlcsstwitter-bootstrapfont-awesome
13
Rune

ここでの使用は検討することが重要です。これはトリガーなので、ここでリンクを使用します。 ：hoverがこの状態を変更しても、セレクターの状態がdisplay：noneまたはvisibility：hiddenであった場合、IOSはこの内部のアクションでは動作しません。 「非表示」にする位置。

非常に重要：

親は、そのdivが幅を制限する何かの子であるか、divがフロートまたはインラインブロックでない限り、その中の子画像のサイズではありません。これをグリッド内の列に配置し、画像が任意のビューポート幅でその列と同じ幅である場合、.profile-img-containerの「インラインブロック」を削除できますスタンドアローンでフロートするか、.inline-blockを配置する必要がありますが、親がinline-block max-width：100％が機能しない場合は画像の応答性を変更する必要がありますテーブルセル内では機能しません）。

：hoverは良いアイデアではありません。親のクラスを切り替えることで、jQueryを使用してこれをクリックします。

デモ： http://jsfiddle.net/prtkqb44/

CSS：

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
}

.profile-img-container img {width:100%;} /* remove if using in grid system */

.profile-img-container img:hover {
    opacity: 0.5
}
.profile-img-container:hover a {
    opacity: 1; /* added */
    top: 0; /* added */
    z-index: 500;
}
/* added */
.profile-img-container:hover a span {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
/* added */
.profile-img-container a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}

HTML：

<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <a href="#"><span class="fa fa-upload fa-5x"></span></a>
</div>
20
Christina

パーセンテージの幅を使用して、水平および垂直の両方に中央揃えできますが、これは、配置しようとしている要素、この場合はフォントが素晴らしい要素のおよその幅をパーセンテージで知っていることを意味します。 私はそれをおよそ左揃えし、左上に45％配置することに注意してください。

上記の部分を使用してコードを更新し、フォントを含むアイコンがちらつかないように、含まれるDIVにホバー効果を適用しています。あなたがそれの上にホバーしているとき、画像の上にホバーが失われていたので、それはちらつきました。

HTMLは同じままで、スタイルのみが異なります。

.profile-img-container {
    position: relative;
}

.profile-img-container i {
    position: absolute;
    top: 45%;  
    left: 45%;
    transform: translate(-45%, -45%);
    display: none;
}

.profile-img-container:hover img {
    opacity: 0.5;    
}

.profile-img-container:hover i {
    display: block;
    z-index: 500;
}

更新された JSFiddle。

5
Raul Rene

@ Christina ソリューションの修正バージョン： http://jsfiddle.net/prtkqb44/354/

正しく動作していなかったこの1つを削除しました

.profile-img-container img:hover {
    opacity: 0.5
}

。profile-img-containerに追加

background: rgba(255, 255, 255, .5);
2
Alberto T

次の解決策は、最上部のコンテナの固定幅（この例では300px）を確保できる限り、またはそうでなければ常に画像のレンダリングされた高さと等しいline-height値を持つことができる限り機能します。 。

このソリューションは、line-heightプロパティとtext-alignプロパティを活用して、それぞれ垂直方向と水平方向の配置を実現します。

<div class="profile-img-container">
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <div class="profile-img-i-container">
        <i class="fa fa-upload fa-5x"></i>
    </div>
</div>

.profile-img-container {
    height: 300px;
    width: 300px;
    line-height: 300px;
    position:relative;
}

.profile-img-container:hover img {
    opacity: 0.5;
}

.profile-img-container:not(:hover) .profile-img-i-container {
    display: none;
}

.profile-img-i-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 500;
    text-align:center;
}

.profile-img-i-container i {
    display:block;
    line-height: inherit;
}

フィドル

ちらつきについて：

:hoverに注意してください。あなたの例では、次のスニペットがありました：

.profile-img-container img:hover + i {
    display: block;
    ...
}

これにより、画像にカーソルを合わせるとi要素が表示されます。次に、i要素が画像の上に配置されるため、画像上でホバリングするのではなく、i要素をホバリングします。アイコンが再び非表示になり、画像に再びカーソルを合わせます。これがちらつき効果の原因です。解決策は、一番上の要素の:hoverプロパティを操作することです。

.profile-img-container:hover img + i {
    display: block;
    ...
}
1
abl

.profile-img-containerの位置をabsoluteに変更し、その幅を50％に設定しました（幅を調整して画像サイズを変更できます）。

.profile-img-container {
position: absolute;
width:50%;
}

ちらつき効果のため、img z-indexをiのz-indexよりも高く設定する必要があります。

.profile-img-container img:hover {
opacity: 0.5;
z-index: 501;
}

.profile-img-container img:hover + i {
display: block;
z-index: 500;
}

Iの位置を絶対位置に変更し、margin-leftとmargin-topを使用して中央に配置しました

.profile-img-container i {
display: none;
position: absolute;
margin-left:43%;
margin-top:40%;
}

そして最後に、imgの位置をabsoluteに変更しました

.profile-img-container img {
position:absolute;
}

このコードを試してください： http://jsfiddle.net/fns8byfj/16/

0
null