0

ポートフォリオ画像のあるサイトを持っています。画像にカーソルを合わせると、オーバーレイが表示されます。

私はこれを実装して、コードが (3 つの異なるポートフォリオ アイテムに対して) 乗算されたときに、オーバーレイが常に最初の画像上にのみ表示されるようにしました。

誰でも助けることができますか？

ライブリンクはこちら

画像オーバーレイを作成するために使用されるコード:

CSS:

.image { 
    position: relative; 
    height: 240px;
}
.hoverimage { 
    position: absolute; 
    top: 5px; 
    left: 25px; 
    display: none;
}
.image:hover .hoverimage { 
    display: block; 
}​

HTML:

<img src="images/portfolio_image_1.png" class="captionme" 
title="I am the only son" alt="Porfolio detail" />

<img src="images/portfolio_image_1.png" class="captionme" 
title="I am the only son" alt="Porfolio detail" />

<img src="images/portfolio_image_1.png" class="captionme" 
title="I am the only son" alt="Porfolio detail" />
4

1 に答える 1

0

ロールオーバーされるそれぞれの異なる画像をオーバーレイするには、HTML および CSS ファイルにいくつかの変更を加える必要があります。HTML ファイルで <div class="image"> を検索し、各 <img class="hoverimage"> 要素を <div class=""imgpost"> 内に配置します。 

<div class="image">
  <div class="imgpost">
    <img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
    <div class="thecaption">I am the only son</div>
    <img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
  <div class="imgpost">
    <img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
    <div class="thecaption">I am the only son</div>
    <img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
  <div class="imgpost">
    <img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
    <div class="thecaption">I am the only son</div>
    <img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
</div>

次に、CSS で次のスタイルを追加/変更します。 

.hoverimage { position: absolute; top: 1px; left: 1px; display: none;}

.imgpost .hoverimage {
border: none;
background: none;
}

.imgpost:hover .hoverimage {
display: block;
}

次に、このスタイルを削除します。 

.image:hover .hoverimage { display: block; }​

于 2012-08-11T19:21:24.130 に答える