Clickable area with background image and text

Question

I'm a front-end novice and am trying to figure out how to build the following in my rails app:

https://dl.dropboxusercontent.com/u/10334022/browse.png

Each image is a company model with the attributes title, subtitle, image, and number of deals. I want the entire area of each separate image to be clickable and link to the "show" action. Also I need to darken the image a to make the text more readable. My question is how to make each individual picture-button.

Currently, I have bootstrap deployed on my app via the following gem in my Gemfile:

gem 'bootstrap-sass', '2.3.2.0'

I am using carrierwave to store the images and they are accessible in the views the following way:

<%= image_tag @company.image_url %>

This seems like it will be a long answer, but I really don't know where to start.

Answer 1

I believe All you need to make all images html div.

lets say image 1st is with tag as inner html element with background image with your image.

also you can place/set particular badges to that div and also you can darken that image on any mouse event using css.

if i am missing anything or you have any questions. please let me know..

Thanks.

Answer 2

You just need to place the Image inside an anchor like this:

<%= link_to(image_tag @company.image_url, company_path(@company)) %>

Basically, link_to create a link, where the first argument is the 'clickable' content shown to the user and the second argument is the actual link itself.