这就是我要做的事情:当我将鼠标悬停在图像上时,显示来自我的数据库的图像并显示带有下载按钮(链接到文件的URL)的叠加层。 请参见此处的插图:http://cl.ly/image/2T200Z451K0v
我正在使用rails和paperclip。 这基本上就是我的观点:
<%= image_tag pin.image(:medium) %>
<%= link_to "download", pin.download_link, class: "btn btn-large btn-primary"%>
显示下面的图像和下载按钮。
我尝试了很多东西,只有当我将鼠标悬停在图像上但按钮始终位于图像下方时,我才设法显示按钮。我尝试使用position:relative但我想如果图像是一个div并且按钮位于div内部并且我不知道该怎么做那么它会起作用。
答案 0 :(得分:0)
使用HTML和CSS很容易做到这一点。这是一个例子:
http://codepen.io/anon/pen/Hwfnz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {width: 300px; height: 240px;}
a {display: table; width: 300px; height: 240px; vertical-align: middle; text-align: center; position: relative;}
span {display: none;}
a:hover span {width: 300px; height: 240px; line-height: 240px; position: absolute; left: 0; top: 0; display: block; text-align: center; background: rgba(67,81,96,0.7); }
span b {font-size: 1.5em; font-weight: normal; padding: 8px 12px; border-radius: 5px; background: #6bbe70; color: #fff; font-family: sans-serif;}
a:hover span b:hover {background: #000;}
img {background: #e7e7e7; border: none; vertical-align: bottom;}
</style>
</head>
<body>
<div>
<a href=""><img src="http://pageaffairs.com/sp/so-16390475.jpg" width="300" height="240"> <span><b>download</b></span></a>
</div>
</body>
</html>
答案 1 :(得分:0)
这是我最终做的,遵循ralph的建议 html:
<div class="pin_image">
<a href=<%= pin.download_link %>>
<%= image_tag pin.image(:medium) %>
<span><b>download</b></span>
</a>
</div>
的CSS:
.pin_image {
a {
display: table;
vertical-align: middle;
text-align: center;
position: relative;
}
span {
display: none;
}
a:hover {
span {
display: block;
position: absolute;
vertical-align: middle;
text-align: center;
top:45%;
width: 100%;
}
}
span b {
padding: 10px 20px;
font-size: 22px;
text-shadow: none;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background:#2DC76E;
color: white;
}
a:hover span b:hover {
background: #25A65B;
}
}