JavaScriptを使わずに画像にマウスオーバーしたときにテキストを表示するにはどうすればよいですか?

画像にマウスオーバーするとテキストを表示

画像の左下隅にハイパーリンクを含む小さなボックスを表示しようとする場合マウスがその上に移動します。 JavaScript を使用せずにこれを実現するために、2 つの CSS ソリューションを紹介します:

CSS3 ソリューション:

CSS3 :hover 疑似要素の使用:

<div>
<pre class="brush:php;toolbar:false">#wrapper .text {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

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

jQuery ソリューション:

<div>
<pre class="brush:php;toolbar:false">#wrapper p {
    position: relative;
    bottom: 30px;
    left: 0px;
    visibility: hidden;
}

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

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

HTML ヘッドに jQuery ライブラリを忘れずに含めてください:

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