0

I'm not really sure how to proceed with this. I've tried to do this sort of thing before with no success at all, so I figured I'd jump on here first to seek the wisdom of you intelligent folk.

Basically I have a series of 80x80 thumbnails tiled on my page, and I'd like a small plus button on the bottom right corner of the thumb (that has a hover so you can see it's a button) that executes a Javascript function. Basically the plus button is going to add the thumbnail to another area of the page.

Anyway can someone give me a quick example of how to accomplish this? Not only is the button clickable but if the normal image part of the thumbnail is clicked I want it to go to that thumb. I've got the thumbnail part working, I just need to figure out how to overlay the button and make it a separate clickable element to the actual thumbnail. I've made a plus button image and a hover plus button image for this.

Basically I'm just looking for a starting point, I've tried examples on Google and I can't get anything working, and none of them are really tailored to what I'm trying to do. Unfortunately CSS is not one of my strong suits.

Thanks for your help everyone, much appreciated.

b0xxed1n
  • 2,063
  • 5
  • 20
  • 30
  • 1
    You need to edit your question and post the relevant code for your current problem! Also, is always good to tell what have you tried so far! – Zuul May 19 '12 at 02:43
  • 2
    Your question is very similar to the one answered http://stackoverflow.com/questions/403478/css-how-to-overlay-images – Brendan Cutajar May 19 '12 at 02:49

1 Answers1

2

If I understand correctly, try this...

.img_container {position: relative; width: 80px; height: 80px;}

.img_container button {display: none; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;}
.img_container:hover {background: rgba(0,0,0,.4);}
.img_container:hover button {display: inline-block;)

your html

<div class="img_container">
    <img src="pic.png">
    <button>+</button>
</div>

Hope this helps :)

Josh
  • 605
  • 2
  • 8
  • 16