悬停效果对图像的问题

Hello i am trying to create hover effect on img.

您好我正在尝试在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;
}

i need a something like this , when the user hover on it

当用户将鼠标悬停在它上面时,我需要这样的东西

but i am getting something like this

但我得到这样的东西

can someone help me to achieve what i am trying to do..

有人可以帮助我实现我想做的事情..

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

4 个解决方案

#1

You want like this, check DEMO http://jsfiddle.net/yeyene/Nnd7w/17/

你想要这样,检查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;
}

#2

Try this - and let me know if it works for you..

试试这个 - 让我知道它是否适合你..

Fiddle

Just a few changes - Could use some cleaning up.

只是一些变化 - 可以使用一些清理。

     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;
 }

#3

Made a few modifications to you CSS

对你做了一些修改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;
}

Instead of playing with bottom property, I just changed opacity. I also assigned a class to anchor tag to make it display under the image. Also, you can see I have given some margin to the image to make it center and changed the width and height of your link-count div.

我只是改变了不透明度,而不是玩底层财产。我还分配了一个类来锚定标签,使其显示在图像下方。此外,您可以看到我为图像添加了一些边距,使其居中并更改了链接计数div的宽度和高度。

See Fiddle

#4

I just changed bottom:-100px; to top: 160px; and it works fine!

我刚改变了底部:-100px;顶部:160px;它工作正常!

Fiddle

Edit: Some more options because I don't understand:

编辑:更多选项,因为我不明白:

Fiddle, and the one I think you want: Fiddle (that one's messy, but the hover only activates if you actually hover on the image.)

小提琴,以及我认为你想要的那个:小提琴(那个很乱,但只有当你实际悬停在图像上时,悬停才会激活。)