InsaneJournal

Tweak says, "why is there bacon in the soap"

not here anymore. (jingle) wrote in rp_tutorials,
@ 2012-01-21 00:23:00

Is it possible to have journal entries appear on mouse over? I'm not sure that I know how to describe this but what I want to do is have a huge photo covering everything, and as soon as you mouse over they appear. I have a paid account and I think I can do it in a style, I just don't know how to start messing with that sort of transparency. Any and all help would be appreciated.

(Post a new comment)

	sloth 2012-01-21 10:27 pm UTC (link)
	do you have an example of what you're talking about? i might be able to help you :) (Reply to this) (Thread)

	jingle 2012-01-23 07:28 pm UTC (link)
	I do, this is going to be weird so prepare yourself. And from down there, what I want is the journal entries to just sort of emerge by playing with the transparency of the one big image that sort of, covers them when you first visit. (Reply to this) (Parent)

	wastintime 2012-01-23 06:22 pm UTC (link)
	Yes and no. Yes, you can do it, but no it won't work in every browser. You don't need a paid account to do it, but it will probably look funky if you're not used to CSS. If you're still interested, let me know and I'll drum up the code. I was going to use it on a layout until I learned that it doesn't work in every browser. (Reply to this) (Thread)

	wastintime 2012-01-23 06:23 pm UTC (link)
	When it works, though, it pretty much makes people crap their pants in awe. JS. (Reply to this) (Parent) (Thread)

jingle
2012-01-23 07:26 pm UTC (link)

THAT is what I'm looking for. I want a crap pantstacular layout. I'm never ever going to have enough words in my vocabulary to describe exactly what I'm looking for so I did this:

but what I want is the journal entries to just sort of emerge by playing with the transparency of the one big image that sort of, covers them when you first visit. Am I making sense or do I sound like a crazy person? I just think this would be the coolest.

(Reply to this) (Parent) (Thread)

	wastintime 2012-01-23 07:36 pm UTC (link)
	Oh, I know exactly what you're talking about because I've done it! I just took issue with it because it wouldn't work in certain older browsers because you're using the `hover` selector on a nested element. (Reply to this) (Parent) (Thread)

	jingle 2012-01-23 07:38 pm UTC (link)
	The fix you posted to make firefox layouts work without issue in IE wouldn't work for this? I know that seems like a silly question but I really only know basic html. But truthfully? As long as it worked for me I wouldn't mind. I'd sit and mouse over and laugh like a loon happily without it ever working for other people. (Reply to this) (Parent) (Thread)

wastintime
2012-01-23 07:43 pm UTC (link)

The problem isn't Firefox vs. IE (though it's mostly the old IE browsers where the problem lies), it's that older browsers are compliant with the current CSS standards.

http://graphically.insanejournal.com/

I set it up real quick there to change the display property on the entries depending on whether or not you're hovering over the body of the page. It's not a complete layout by any means (all I did was add a picture and resize the entry area) but I think it gets the demonstration across?

(Reply to this) (Parent)

	wastintime 2012-01-23 07:47 pm UTC (link)
	Also, there's about 20 different ways to accomplish what I'm doing and you can make it look REALLY fancy by doing opacity and location transitions but this the simplest "on and off" scenario. (Reply to this) (Parent) (Thread)

	jingle 2012-01-23 07:52 pm UTC (link)
	That is so so so cool, but I see what you mean. It works in chrome for me but not my outdated firefox. That's exactly what I'm looking for, you're a total guru! (Reply to this) (Parent) (Thread)

	wastintime 2012-01-23 08:00 pm UTC (link)
	Thanks! I just learn from playing with the code. If you ever want to see a transition, which don't work in IE and older browsers, you can play with them here: http://www.w3schools.com/css3/css3_transitions.asp (Reply to this) (Parent) (Thread)

	eyelet 2012-03-24 06:23 pm UTC (link)
	Sorry to unearth this thread of discussion, but I was wondering if there's a way to, incorporate what you did for ~graphically (the word hover, that reveals a block of text) AND something like this, with images not aligned a particular way, with a hover and link option. Maybe I should be looking at how to modify a Tumblr layout? (Reply to this) (Parent)