web-dev-qa-db-ja.com

マウスオーバー画像上のテキスト？

マウスが画像の上を移動したときに、画像の左下に小さなボックスを表示しようとしています。ボックス内には、別のページへのリンクがあります。

ここ は私が望むものにいくらか似ていますが、ボックスは小さく、画像の境界に接続されていません。

私はすべてを試してみましたが、答えが見つかりません。そして、私はツールチップを使いたくありません。もちろん、javascriptの知識がまったくないという事実は言うまでもありません。これをCSSにしたいのです。

また、私が使用しようとしている画像は、見つけることができます 右ここ

cssimagetextmouseover
28
alex r

これは、CSS3で:hover疑似要素を使用しています。

HTML：

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS：

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

デモ ここ .

代わりに、これはjqueryを使用して同じ結果を達成する方法です。

HTML：

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS：

#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

jqueryコード：

$('.hover').mouseover(function() {
  $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility","hidden");
});

JqueryコードをHTMLページのbodyの任意の場所に配置できます。その後、jqueryライブラリをheadこのように：

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

デモを見ることができます HERE 。

Webサイトで使用する場合は、<img src />値を変更するだけで、複数の画像とキャプションを追加できます。使用した形式をコピーするだけです。class="hover"で画像を挿入し、class="text"で画像を挿入します

43
Fabio

CSSを使用してこれを行う1つの方法を次に示します。

HTML

<div class="imageWrapper">
    <img src="http://lorempixel.com/300/300/" alt="" />
    <a href="http://google.com" class="cornerLink">Link</a>
</div>​

CSS

.imageWrapper {
    position: relative;
    width: 300px;
    height: 300px;
}
.imageWrapper img {
    display: block;
}
.imageWrapper .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper:hover .cornerLink {
    opacity: 0.8;
}

デモ （

または、左下隅に配置する場合：

デモ （

18
3dgoo