1 reply [Last post]
lleemon
lleemon's picture
Offline
Regular
Last seen: 2 years 23 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.

Thanks.

bijayjoshi
bijayjoshi's picture
Offline
Regular
Patan, Nepal
Last seen: 25 weeks 1 day 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>
 
                </div>

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.

Cheers!
BJ

Bijay Josi
Loves Open Web.