您好我正在尝试在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 - &GT; http://jsfiddle.net/Nnd7w/
答案 0 :(得分: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;
}
答案 1 :(得分: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;
}
答案 2 :(得分: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的宽度和高度。
请参阅Fiddle
答案 3 :(得分:1)