将鼠标悬停在图像上时显示按钮（在image_tag上滑动）

Question

here's what I'm trying to do: display images from my db and display an overlay with a download button (linked to a file's url) on top of the image when you hover your mouse over it. 这是我要执行的操作：当您将鼠标悬停在数据库上时，显示数据库中的图像，并在图像上方显示一个带有下载按钮（链接到文件的url）的覆盖图。 see illustration here : http://cl.ly/image/2T200Z451K0v 请参阅此处的插图： http : //cl.ly/image/2T200Z451K0v

I'm using rails and paperclip. 我正在使用滑轨和回形针。 Here's basically what I have in my view: 我基本上是这样的：

<%= image_tag pin.image(:medium) %>
<%= link_to "download", pin.download_link, class: "btn btn-large btn-primary"%>

which displays the image and the download button below. 在下面显示图像和下载按钮。

I've tried many things, I've managed to make the button appears only when I hover over the image but the button always stays below the image. 我做了很多尝试，设法使按钮仅在悬停在图像上方时才显示，但按钮始终停留在图像下方。 I tried using position:relative but I guess it would work if the image was a div and the button was inside that div and I don't know how to do that. 我尝试使用position：relative，但是我想如果图像是一个div并且按钮在该div内，那将是可行的，我不知道该怎么做。

Answer 1

It's easy enough to do this with HTML and CSS. 使用HTML和CSS做到这一点很容易。 Here's an example: 这是一个例子：

http://codepen.io/anon/pen/Hwfnz 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>

Answer 2

Here's what I finally did, following ralph's suggestion html: 这是我根据ralph的html建议最终做的：

<div class="pin_image">
  <a href=<%= pin.download_link %>>
    <%= image_tag pin.image(:medium) %>
  <span><b>download</b></span>
  </a> 
</div>

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

将鼠标悬停在图像上时显示按钮（在image_tag上滑动）

问题描述

2 个解决方案

解决方案1
0 2013-05-06 01:20:38

解决方案2
0 2013-05-06 16:00:55

将鼠标悬停在图像上时显示按钮（在image_tag上滑动）

问题描述

2 个解决方案

解决方案1 0 2013-05-06 01:20:38

解决方案2 0 2013-05-06 16:00:55

解决方案1
0 2013-05-06 01:20:38

解决方案2
0 2013-05-06 16:00:55