Enlarge thumbnail overlay on other image

[auko]

I was able to create enlarge thumbnail but the thumbnail kept showing under other image. I do not want that. I want a enlarge thumbnail showing over other image, not under it.

http://codepen.io/auko/pen/emjEjz

Please let me know if you guys cannot see it. I will find a way to post the images somehow…

[Paulie_D]

You need to adjust your Codepen to put the HTML, CSS etc. in the right areas.

Oh and use proper images as well, dummy ones from lorempixel.com if necessary.

Help us help you.

[auko]

Thanks for the tips! I am going to edit the post now (I just realize that I can’t use dummy pictures because I had customized picture sizes so if I use dummy pictures, it’ll make my website messed up and hard to read).

[auko]

since I can’t edit my own post (????). Here is the link to the webpage, http://postimg.org/image/6n9k2ygb5/ (it is not live, it’s just an image so you get the idea what I mean). The name of the picture hexagon is raspberrylogo.png and its ID is Image134. Those pictures can be found in apDiv12 (the ID of DIV), I hope that helps?

[Paulie_D]

I just realize that I can’t use dummy pictures because I had customized picture sizes so if I use dummy pictures, it’ll make my website messed up and hard to read

Lorempixel lets you define specific image sizes if you want.

[Paulie_D]

Frankly, the ‘updated’ Codepen is still a mess…you’re not making it easy.

We can’t diagnose an image. We need properly formatted HTML, CSS (and any required JS) in a properly organised Codepen.

Try making a small example with just enough separated code to demonstrate the issue.

[auko]

I apologize for that. Let me fix the errors I made. Again, I apologize for this mess I made.

[auko]

Ok, I hope I fixed the issue. I am not sure why other picture won’t be next to first picture (they are actually next to each others in my webpage). My problem is that the first picture (dessert) with hover image will keep going under second picture (onions) (codes can be found in codepen). I want picture of dessert to display the hover image over top of onion picture. This is the problem I am trying to explain (see the picture, where the problem is at), http://postimg.org/image/6n9k2ygb5/

Again, I am terribly sorry about the mess I made earlier.

[Paulie_D]

Unfortunately, the Codepen really doesn’t demonstrate the issue.

Offhand it sounds like a z-index issue but the code output by what I suspect is Dreamweaver(?) in Codepen is overly complex and full of inline styles.

We’d have to strip it down and re-arrange so much of it that makes any attempt to debug it something of an onerous (not to say Herculean) task.

[auko]

Yes, it was done in Dreamweaver. It was a class project. That CSS style is one thing I’ve struggled with. I’ll take a look at z-index and let you know.

[auko]

I tried to play around with z-index. The hover still goes behind other image. Any ideas?

[auko]

I do have Javascript and they are applied well. Only one I have issue is with hover image. I can see rollover images just fine. When I move over the mouse, the hover image will appear behind other image (like the picture link I posted here showing that the hover image goes behind the lime part).

[auko]

Goodness, I think I finally fixed the problems in codes. You should see the problem now hopefully! I was able to see it in full view when I clicked on “open frame in new window”. I hope you can see the problem now.

[Author]

Posts