0

アンカー タグとイメージ タグに問題があります。私の画像タグは（本質的に）それぞれ div タグ内にあり、div タグには一定の高さと幅の値があります。画像タグには一定の高さの値が与えられるため、幅は縦横比に基づいて計算でき、画像が div 内に収まるようにサイズ変更されても画像が歪むことはありません。

2 つの理由から、各画像をアンカー タグで囲みたいと思います。(1.) 画像はリンクとして機能するだけでなく、(2.) ユーザーが画像にカーソルを合わせたときに、画像の上にオーバーレイを表示できるようにします。

イメージタグをアンカータグの中に入れることでリンクの問題は解決しますが、2 つ目の問題については困惑しています。アンカー タグを動的にサイズ変更して、それぞれのイメージ タグ上に配置する必要があります。理想的には、問題を解決するために JavaScript を使用することは避け、CSS だけに固執したいと思います (可能であれば)。必要に応じて、マークアップを少し追加することに異論はありません。

関連する HTML:

<listitem>

    <a href="#"><img src="../images/image1.jpg"/></a>

</listitem>

<!--More listitems with different sized images go here-->

そしてCSS：

#pictureListContainer listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
}

#pictureListContainer listitem img {

    position: relative;
    float: right;
    height: 203px !important;
    vertical-align: middle;
    margin: 21px 296px 21px auto;

    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

前もって感謝します。

更新: オーバーレイを画像と同じサイズにして、画像のみをオーバーレイするようにしたいことを明確にする必要があります。

4

2 に答える 2

1

CSS と HTML のみを使用して実行できます: JSFiddle

HTML

<div class="listitem">
    <a href="#">
        <img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
        <span class="overlay-text">Test</span>
    </a>
</div>

CSS

.listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
    overflow: hidden;
}

.listitem img {

    position: relative;
    float: right;
    height: 203px !important;
    vertical-align: middle;
    margin: 21px 296px 21px auto;

    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    position: relative;
}

.listitem a span {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #FFF;
}

.listitem a:hover span {
    display: block;
}

編集：画像に合わせてオーバーレイ

JSFiddle

CSS

.listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
}

.listitem img {
    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

.listitem a {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.listitem a span {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #FFF;
}

.listitem a:hover span {
    display: block;
}
于 2013-05-15T10:46:50.413 に答える
0

onClick画像にを使用できます

<img src="" onClick="" />

これにより、タグのオーバーレイなどの機能を生成する煩わしさがなくなり、a両方の効果を同時にうまく機能させることができます。

お役に立てれば。

于 2013-05-15T10:43:26.183 に答える