CSS Help required...

Marcel

Marcel

Kim Jong Bod
Admin
Messages
29,411
Name
Marcel
Edit My Images
Yes
Been trying to get the image fade / mouse rollover working on my photoblog.
Successfully managed it this morning using jquery.js.

However, there is a problem with the positioning in Firefox.

Chrome = Perfect
Safari = Perfect
Firefox = Buggered.

http://www.marcelbooth.co.uk/photoblog/

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


This is Firefox
marcelbooth-20111023-173000.jpg


You can see it aligns the top left of the top image to the centre of the page.

Here is the CSS that I'm using

Code: 
div.fadeoriginal {
           position: relative;

    }
 
img.a {
    position: absolute;
    left: 50%
    /*left: 0px;
    top: 0px;*/
    z-index: 10;
    }
 
img.b {
    position: inherit;
    /*left: 0px;
    top: 0px;*/
    margin-top: -16px;
    }
 
Not sure if it makes a difference, but you're missing a semi-colon after the 50% in img.a
 
i thought firefox was the one that was supposed to work all the time? bad news is it works in IE too
 
arad85 said:
Not sure if it makes a difference, but you're missing a semi-colon after the 50% in img.a
Click to expand...

up i recon that would make a diifference.
 
Sorted. But that didn't fix the problem.

I've changed the CSS to this :

Code: 
div.fadeoriginal {
	position: absolute;
	}
 
img.a {
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 10;
    }
 
img.b {
	position: relative;
	/*left: 0px;
	top: 0px;*/
	margin-top: -16px;
	}

And now go have a look what it looks like.
 
That's properly broken in Chrome now ;)
 
Putting margin-top: -659px; in img.b works on chrome (if youi right click anywhere in the frame and then click Inspect Element, you can edit attributes in the right hand pane). Not the best solution though.
 
Yeah I did think that earlier. Too dirty a way of doing it though. I need it to be fluid unfortunately
 
if you haven't sorted it by the morning, drop me an e-mail
 
So you're just trying to make the images change slightly on hover?

That looks like a quite an odd way to go about it, if I'm honest.

Background images might be a simpler solution, but I don't know if that's a possibility, because you're obviously using a CMS.

Your code looks basically right, I have a feeling the rest of the site's CSS may be having an adverse effect on your img swap snippet.

Oh and you definitely want your images to absolutely positioned inside a relatively positioned div, swapping that just won't work.
 
Last edited:
Try something like this

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
  	body, .container {
	margin: 0px;
	padding: 0px;
}
	.container {
	width: 972px;
	left: 100px;
	top: 100px;
	position: relative;
	}

    .b {
	position:absolute;
	top:0;
	left:0;
	display:none;
}
   </style>
 
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div class="container">
		 <a href="#"><img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689.jpg" alt="" class="a" /></a>
 			<a href="#"><img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689_original.jpg" alt="" class="b" /></a>
  	</div>
<script>
		
        $(".container").hover(
		function () {
          $(".b").fadeIn(1000);
		 },
		 function () {
          $(".b").fadeOut(1000);
		 });
</script>

</body>
</html>
 
Still not sorted it :(

The problem with that Paul (thankyou very much btw :)) is that it's not fluid. I post differently sized shots to my blog, and this needs to work with them all.

Martyn, I'm running wordpress, and you're right. All I want to do is for the images to switch on hover/mouseover.

It's a "Show the original" feature I want to implement into my photoblog, so if anyone has a better / cleaner way of doing it then brill :thumbs:

I used this way as its less to put in on my blog, just two images in a div each time I post.
 
Rollover?
 
Right, I've sorted it.

Sort of.

It now works as it should

Mac > Chrome YES
Mac > Safari YES
Mac > Firefox (7) NO
Just about to test Windows

Windows > Opera YES
Windows > Firefox NO
Windows > Chrome YES
Windows > Netscape Navigator NO
Windows > Internet Explorer YES (First / overlaid image is 1 pixel further down than the other but that's unimportant right now)


With Firefox and Navigator, the second image is show as in the screenshot in the first post.

Here is the latest CSS that is almost working

Code: 
div.fadeoriginal {
	position: inherit;
	}
 
img.a {
	position: absolute;
	z-index: 10;
    }
 
img.b {
	position: relative;
	margin-top: -19px;
	}
 
I still think both your images need to be absolutely positioned. There's also your minus margin, I think the only reason you need that is because of the line break between your two img tags.

I've got a feeling there's some odd overflow settings set elsewhere in the code, that'd be quite annoying to sit and trawl through.


Perhaps this might be a solution?

http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
 
Sorry Richard, didn't see your post there :$

What's your solution? (If it involves me banging my head and giving up, I tried that :p)

I'm actually all for using a different approach.

All I want is a simple image swap, probably using jQuery with a nice fade effect.
I've almost sorted the above option.

But I've also managed it with another approach, again using jQuery (just go to the previous post of the deckchair), of fading one image out, then another in...but that's a bit messy too. I'd like them to cross over each other when they fade (One fades out while the other fades in, not before / after).

Or I can also use a simple image switch, which worked......Gah, this stuff is never easy, it's why I steer clear :D
 
Marcel said:
Sorry Richard, didn't see your post there :$

What's your solution? (If it involves me banging my head and giving up, I tried that :p)

I'm actually all for using a different approach.

All I want is a simple image swap, probably using jQuery with a nice fade effect.
I've almost sorted the above option.

But I've also managed it with another approach, again using jQuery (just go to the previous post of the deckchair), of fading one image out, then another in...but that's a bit messy too. I'd like them to cross over each other when they fade (One fades out while the other fades in, not before / after).

Or I can also use a simple image switch, which worked......Gah, this stuff is never easy, it's why I steer clear :D
Click to expand...
dont know till I look at it. Will need to assess the HTML, JS and CSS - often the JS is re-writing the CSS on the fly
 
Never one to give up,

give this a try

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
     .container {
	position: relative;
}
    .b {
	position:absolute;
	top:0;
	left:0;
	display:none;
	width:100%;
}
   .container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
	.container img:hover {
	cursor: pointer;
	cursor: hand;
}
  </style>
 
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div class="container">
		 <img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689.jpg" alt="" class="a" />
 		<div class="b"><img src="http://www.marcelbooth.co.uk/photoblog/wp-content/uploads/2011/10/090729_2689_original.jpg" alt="" /></div>
  	</div>
<script>
	$(".a").mouseenter(function(){
      	$(".b").fadeIn(1000);
		})
		
	$(".b img").mouseleave(function(){
     	$(".b").fadeOut(1000);
    	});

</script>

</body>
</html>
 
Yatta!

Just testing it with the Windows browsers now :D
 
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;
	}

Thanks for all your help everyone :)
 
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.
 
While you do have a CSS issue in Opera on a Win7 Box (images offset by about 15 pixels from each other) I am convinced your issue is the JS, not the CSS

Check the roll-over on this page: http://www.webvamp.co.uk/blog/coding/css-image-rollovers/ in all your browsers If it looks fine, follow the instructions with a pair of your (larger) images on a clean HTML page. If that is still fine translate it to one of your blog pages
 
As an afterthought - if in firefox you "swipe the image" you notice that the "grey area" is indented with the "additional image that is a shadow on the LHS" Have a good look at the CSS for that little extra image - it most certainly is contributing to the issue, and you may find that by dumping it in a div on its own and making your image swap independent of the shadow, that the JS and CSS wont get tripped up

You are using -o userslect:none See this: http://dev.ckeditor.com/ticket/21 While this doesn't help, it does explain what you are up against. Sometimes a users browser is just buggy

Additionally you have
"====="

on a line infront of
"div.fadeoriginal {"
i.e.
=====
div.fadeoriginal {

That may be interpreted literally as
====div.fadeoriginal { by some browsers


try this:
comment out or remove as an experiment the following CSS

.entry IMG
{
border: none;
padding: 0px 23px;
background: url(images/shadow.jpg) no-repeat top left;
}
 
I'm on XP using Firefox and it's fine here. It is portable Firefox, don't know if that makes a difference.
 
Oops, forgot about this thread, plus Ive not had chance to start tinkering at all :(

Thanks for the replies. :)

Richard....your post could have just been in Mandarin :$
I'll need some time to digest it :D
 
Richard King said:
While you do have a CSS issue in Opera on a Win7 Box (images offset by about 15 pixels from each other) I am convinced your issue is the JS, not the CSS

Check the roll-over on this page: http://www.webvamp.co.uk/blog/coding/css-image-rollovers/ in all your browsers If it looks fine, follow the instructions with a pair of your (larger) images on a clean HTML page. If that is still fine translate it to one of your blog pages
Click to expand...

I know I could use the CSS switch, but it has a horrible jumpy switch and I need a nice fade effect.
 
Might be a dumbass question but why aren't you using a wordpress plugin to do it? There's loads of slideshow ones. They'll have already sweated the blood to get it working in most browsers :)
 
Well I *think* I've sorted it

Code: 
div.fadeoriginal {
	position: relative;
 	}
img.a {
	position: absolute;
	z-index: 10;
    }
 
img.b {
	position: static;
	}



And this is a rudimentary layout of how each blog post is formed.

Code: 
<div>
    <div.fadeoriginal>
         <img.a>
         <img.b>
    </div>
Blog text
</div>


Can anyone confirm it works now?

BTW Suz, There's no plugin to do it. Basically I have to be able to add two images then a load of text and that's it. I have a slideshow plugin for slideshows, but I want to make this as simple as possible, so that should I wish to switch themes etc I can, also without the help of plugins.
Besides there are no simple image switch plugins that fade :( There is one...but it doesn't fade.
 
Gutted - just tried to view your blog Marcel, seems my phone isn't keen on it.... Will on laptop later. Keen to get some of this rollover mallarky sorted for my blog
 
Any joy Pat? What phone didn't like it?
 
You must log in or register to reply here.
Back
Top