CSS Help required please.....

Bod

Bod

Bod

Soldato
Joined
17 Oct 2002
Posts
3,548
Location
Black Pudding Land
I'm trying to implement a "Show the original" rollover effect on my photoblog (which is running Wordpress)

www.marcelbooth.co.uk/photoblog

This is Chrome and Safari
marcelbooth-20111023-172858.jpg


This is Firefox
marcelbooth-20111023-173000.jpg


It's using jQuery and a tutorial I found via google.

This is the script code :

Code: 
<script>
	jQuery(document).ready(function(){
	jQuery(".a").hover(
	function() {
		jQuery(this).stop().animate({"opacity": "0"}, "slow");
	},
	function() {
		jQuery(this).stop().animate({"opacity": "1"}, "slow");
	});
});
</script>

The HTML inside the blog post
Code: 
<div class="fadeoriginal">
<img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689.jpg" alt="" class="a size-full wp-image-678" />
<img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689_original.jpg" alt="" class="b" />
</div>

And finally the CSS :

Code: 
div.fadeoriginal {
	position: inherit;
	}
 
img.a {
	position: absolute;
	z-index: 10;
    }
 
img.b {
	position: relative;
	margin-top: -16px;
	}
It works on the following browsers :

Mac > Chrome YES
Mac > Safari YES
Mac > Firefox (7) NO
Windows > Opera YES
Windows > Firefox NO
Windows > Chrome YES
Windows > Netscape Navigator NO
Windows > Internet Explorer YES

With Firefox and Navigator showing the image starting from the centre as above.

I know its something to do with the CSS, and I went through every permutation of changing relative to inherit or absolute as I could think of, and this is the closest I could get it.
 
Last edited:
You're testing for Netscape!? I'm surprised anyone does! :)

try floating the images, and use a <br> with clear:both under it.
 
A much easier way to do this is to have the rolled-over image as the background of the div, and then fade out the default image on rollover. It completely saves the relative/absolute positioning headache of having two overlapping images.

Also, those images are cropped differently, so it appears to move to the left a bit as the images fade together.
 
Yeah it does. However, the image dimensions are exactly the same.

How would I go about setting one as the background image of the div?

Naturally I need this to be as simple as possible per blog entry. At the moment all I do is post the two images inside a div, one with class a, one with class b.
 
Thanks. Not sure how I can work that into every blog post though (As that would have to go in the theme/css), as the image changes with each blog post.
 
feedtheram, I'd been messing about with an alternative JS method on a different post, and mistakenly took out the JS from above out of the header.
Anyway......


Yup! Works with all of them now :)

Here are the three bits of code I'm using

JS
Code: 
<script>
	jQuery(document).ready(function(){
	jQuery(".a").hover(
	function() {
		jQuery(this).stop().animate({"opacity": "0"}, "fast");
	},
	function() {
		jQuery(this).stop().animate({"opacity": "1"}, "fast");
	});
});
</script>

HTML
Code: 
<div class="fadeoriginal"><img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689.jpg" alt="" class="a"/><img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689_original.jpg" alt="" class="b" /></div>

CSS
Code: 
div.fadeoriginal {
	position: relative;
 	}
img.a {
	position: absolute;
	z-index: 10;
    }
 
img.b {
	position: relative;
	}
 
Well its piddling me off again.

It now sometimes comes up like this :

marcelbooth_%C2%BB_A_cold_autumn-20111115-175001.jpg

(Like it used to).

However, if I hit refresh, then it aligns fine?
This is Chrome on a Mac.
 
I'm wondering if it only does this due to it finishing the downloading of one image before the other? Hence the refresh working...or it working sometimes for other people.
 
You must log in or register to reply here.
Back
Top Bottom