2

こんにちは、img にホバー効果を作成しようとしています。

HTML

<div>
    <img src="http://placehold.it/350x150"/>
    <div class="link-cont"><a href="#">click here to see more info</a></div>

</div>

CSS

div {
    width: 350px;
position: relative;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    height: 100px; 
    opacity: 0;
    transition: all 0.4s;
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-100px;
}

ユーザーがホバーしたときに、このようなものが必要です 画像

しかし、私はこのようなものを得ています

現在

誰かが私がやろうとしていることを達成するのを手伝ってくれますか..

jsFid--> http://jsfiddle.net/Nnd7w/

4

4 に答える 4

3

これを試してください - そしてそれがあなたのために働くかどうか私に知らせてください..

フィドル

ほんの少しの変更 - いくつかのクリーンアップを使用できます。

     div {
     position: relative;
     top: 50px;
     background-color: blue;
     width: 350px;
     height: 150px;
     margin: auto;
 }
 .link-cont {
     background: red;
     position: relative;
     left: -50px;
     top: -200px;
     width: 450px;
     height: 250px;
     opacity: 0;
     transition: all 0.4s;
     z-index: -1
 }
 div a {
     position: relative;
     top: 210px;
     left: 50px;
     opacity: 0;
 }
 div:hover .link-cont {
     opacity: 1;
 }
a {
    text-decoration: none;
    color: #fff;
}
 div:hover a {
     opacity: 1;
 }
于 2013-06-23T06:25:18.397 に答える
3

このようにしたい場合は、DEMO http://jsfiddle.net/yeyene/Nnd7w/17/を確認してください。

div {
    width: 350px;
    font-size:12px;
    position: relative;    
}
div img{
    padding:0 10px;    
}
.link-cont {
    background: red;
    position: absolute;
    bottom: 0;
    width: 370px;
    height: 210px; 
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover  .link-cont {
    opacity: 1; 
    bottom:-40px;
}
.link-cont a{    
    opacity: 0;  
}
div:hover  .link-cont a{
    position: relative; 
    opacity: 1; 
    bottom:-175px;
    left:10px;
    background:#fff;
    color:red;
    text-decoration:none;
    padding:0 10px;
}
于 2013-06-23T06:32:35.237 に答える
2

CSSにいくつかの変更を加えました

div {
    width: 370px;
    position: relative;
}
.link-cont {
    background: red;
    position: absolute;
    top: 0;
    width: 370px;
    height: 200px;
    opacity: 0;
    transition: all 0.4s;
    z-index: -1
}
div:hover .link-cont {
    opacity: 1;
}
div:hover img {
    margin-left: 10px;
    margin-top: 10px;
}
.link {
    display: block;
    margin-top: 170px;
    margin-left: 50px;
}

下のプロパティで遊ぶ代わりに、不透明度を変更しました。また、アンカー タグにクラスを割り当てて、画像の下に表示するようにしました。また、画像を中央に配置するために画像にマージンを与え、リンク数 div の幅と高さを変更したことがわかります。

フィドルを見る

于 2013-06-23T06:23:27.060 に答える
1

bottom:-100px;に変更したばかりtop: 160px;で、正常に動作します！

フィドル

編集：理解できないため、さらにいくつかのオプション：

Fiddle、そしてあなたが欲しいと思うもの: Fiddle (それは面倒ですが、実際に画像にカーソルを合わせた場合にのみホバーがアクティブになります。)

于 2013-06-23T06:08:46.340 に答える