How to get fade words in over image?

Kyle HamiltonData ScientistCommented: 2012-12-21

Are you using jquery on your site?

0

Kyle HamiltonData ScientistCommented: 2012-12-21

Here's the gist of it. Let us know if you need more help

<style>
#container{
   postion:relative;
}
#bgimage{
   position:absolute;
   z-index:1;
}
#textDiv{
   position:absolute;
   z-index:2;
   display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
   $("#textDiv").fadeIn("slow");
});

</script>

<div id='container'>
<img id='bgimage' src='image.jpg'/>
<div id='textDiv'>text to fade in</div>
</div>

0

brettrAuthor Commented: 2012-12-21

Ah, nice.

Is it possible to get the image fading in and animating up slightly? Similar to the above site.

Is it possible to get the text to align the same:

PART FOUR is left of the other text. The other text doesn't wrap under PART FOUR.

0

Kyle HamiltonData ScientistCommented: 2012-12-21

anything possible:)

post a picture of what you are looking for, or if you have some html, post that.

remember to be specific

0

brettrAuthor Commented: 2012-12-21

Using the code snippet you gave, how can I get the text to format like the text in the image?

0

lightspeedvtCommented: 2012-12-21

Here is demo of formatting based on those snippet:
http://jsfiddle.net/XP4YH/

0

brettrAuthor Commented: 2012-12-21

@lightspeedvt: Nice.

I have to use the following after the overlay text divs

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<br/>

Otherwise, the paragraph below runs up into the image.

I did try this after the overlay divs:

<div class="social-sprite" style="clear:both;">

clear:both didn't seem to have any effect. Do you have some idea on how it should be handled?

Also, what is needed to move the bottom word ("Wild") up a little so it isn't nearly touching the bottom of the image?

0

lightspeedvtCommented: 2012-12-21

"clear:both" is not working as we have absolute positioning.

Here is updated demo:
http://jsfiddle.net/XP4YH/1/

0

brettrAuthor Commented: 2012-12-21

I'm not able to duplicate the same div structure you have. I'm using a framework so there are some limitations. I did try position:relative on the div under the text container, which of course had not effect...since it looks like that one needs to be in the container div.

I replaced the paragraph tags with three line break tags. That seems to work fine. Guess I will need to stay with that if there is not way to style it. Thanks.

0

lightspeedvtCommented: 2012-12-21

If you will give the url to see the page - I may try to help.

0

brettrAuthor Commented: 2012-12-21

Here ya go: http://bit.ly/XSvNPm.

0

lightspeedvtCommented: 2012-12-21

Ok. I will check it out tomorrow. Also, you have to fix one javascript error at site.

<script type='text/javascript'>//<![CDATA[
$(function(){
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
});//]]>
</script>

Something is wrong with fancybox:

TypeError: $(...).attr(...).fancybox is not a function
[Break On This Error]

padding : 0

/thebo...ge-one/ (line 57)

0

brettrAuthor Commented: 2012-12-21

Which browser are you using? I'm running FF 17 and Safari 6 and don't see any errors.

I've posted a new question for the line break issue so you can at least get some points for it: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27975880.html.

0

lightspeedvtCommented: 2012-12-22

Those javascript issue appears to all browsers. Install this extension for FF and you will see it:
http://getfirebug.com/

#containerImageOverlay {
    height: 200px;
}

0

brettrAuthor Commented: 2012-12-22

I have firebug installed but don't see the error.

0

lightspeedvtCommented: 2012-12-23

Hmm. I see the error at all browsers and even had checked it at couple of another computers.

Here is a screenshot attached.
screenshot.jpg

0