1 reply [Last post]
lleemon's picture
Last seen: 5 years 31 weeks ago
Timezone: GMT-6
Joined: 2007-06-12
Posts: 13
Points: 6

How do I get a image to show up on top of the image/link I am hovering?

I have test code here:
Test code

The ribbon shows up but it's under the main thumbnail. I need to get it to be above and centered.


bijayjoshi's picture
Patan, Nepal
Last seen: 3 years 33 weeks ago
Patan, Nepal
Timezone: GMT+5.75
Joined: 2012-02-06
Posts: 30
Points: 32

Hi lleemon, I checked your

Hi lleemon,
I checked your code and I can see that you have image inside anchor tag. So, anchor tag is rendered first and then image tag. So the background image of anchor tag will always be behind the image. Smile

Well, that's not the end. There are always a lots of ways to do. You just have to give little bit of trouble to your brain.

Here's one:

1. HTML:

<div class="preview-images">
                    <p><img border="1" alt="" src="http://www.4loopdev.com/lakerestoration/images/lr-big-image-1.jpg" id="main"></p>
                    <a href="#"><span></span><img class="swapImageDisjoint { sin: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-1.jpg'], sout: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-1.jpg'] }" src="http://www.4loopdev.com/lakerestoration/images/lr-big-image-1-sm.jpg" alt=""></a>
                    <a href="#"><span></span><img alt="" src="http://www.4loopdev.com/lakerestoration/images/lr-big-image-2-sm.jpg" class="swapImageDisjoint { sin: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-2.jpg'], sout: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-2.jpg'] }"></a>
                    <a href="#"><span></span><img alt="" src="http://www.4loopdev.com/lakerestoration/images/lr-big-image-3-sm.jpg" class="swapImageDisjoint { sin: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-3.jpg'], sout: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-3.jpg'] }"></a>
                    <a href="#"><span></span><img alt="" src="http://www.4loopdev.com/lakerestoration/images/lr-big-image-4-sm.jpg" class="swapImageDisjoint { sin: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-4.jpg'], sout: ['#main:http://www.4loopdev.com/lakerestoration/images/lr-big-image-4.jpg'] }"></a>

Notice that I have added span tags in between anchor tags.

2. CSS:

.preview-images a {
    display: block;
    float: left;
    padding-right: 8px;
    position: relative;
.preview-images a:hover{/* I removed all codes that was here earlier */}
.preview-images a span{
 display: block;
    float: left;
    height: 100%;
    left: -5px;
    position: absolute;
    right: 0;
    width: 100%;
.preview-images a:hover span {
    background: url("http://www.4loopdev.com/lakerestoration/images/thumb_rollover.png") no-repeat scroll left bottom transparent;
    z-index: 4;

Please contact me if your problem persists.
You can only follow my trick if you like it. But you can always create your own trick and that's what I suggest.


Bijay Josi
Loves Open Web.