0

I have rollover thumbs that fade on my page but id like the text to slide into place instead of fading on but with a transparent colored bar under the text. 

$(document).ready(function()
{
$("img.b").hover(
function() {
$(this).stop().animate({"opacity": "1"}, "70");
},
function() {
$(this).stop().animate({"opacity": "0"}, "100");

the way it operates now

http://toddheymandirector.com/REEL/

how id like it to operate

http://toddheymandirector.com/slide.html

Blorgbeard
  • 101,031
  • 48
  • 228
  • 272
REELHERO
  • 37
  • 1
  • 9
  • 1
    I think you're talking about jQuery here, so I've tagged your question with that. If I'm wrong, please retag it with the framework this is using. – Blorgbeard Jun 14 '12 at 03:55

1 Answers1

3

You can do it a little like this: http://jsfiddle.net/xze3g/2/

EDIT: added opacity for IE

Ryan Potter
  • 835
  • 1
  • 11
  • 25
  • thanks thats great- there are two other elements though - there is the horizontal bar that goes behind the text as well as the change in color to the thumbnail – REELHERO Jun 14 '12 at 17:32
  • drawrdesign you rock.. so the last thing is the thumbnail itself changes.. original http://toddheymandirector.com/images/thumbs_jsh/nike.png rollover http://toddheymandirector.com/images/thumbs_jsh/nike_hot2.png – REELHERO Jun 14 '12 at 22:12
  • You don't have to change the thumbnail, just the opacity. Saves browser load time, and is faster :) – Ryan Potter Jun 14 '12 at 22:20
  • almost there the only prob is the opacity doesn't quite do it - theres an effect on the look and with a grey BG it just gets darker - thoughts http://toddheymandirector.com/textslide.html – REELHERO Jun 15 '12 at 21:08
  • see how it looks here..its a yellowish cast i added in photoshop - something I can do in css? http://toddheymandirector.com/images/thumbs_jsh/nike_hot2.png – REELHERO Jun 15 '12 at 21:10