here's i'm trying do: display images db , display overlay download button (linked file's url) on top of image when hover mouse on it. see illustration here :http://cl.ly/image/2t200z451k0v
i'm using rails , paperclip. here's have in view:
<%= image_tag pin.image(:medium) %> <%= link_to "download", pin.download_link, class: "btn btn-large btn-primary"%> which displays image , download button below.
i've tried many things, i've managed make button appears when hover on image button stays below image. tried using position:relative guess work if image div , button inside div , don't know how that.
it's easy enough html , css. here's example:
http://codepen.io/anon/pen/hwfnz
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style media="all"> div {width: 300px; height: 240px;} {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> 
Comments
Post a Comment