asked on

How to get fade words in over image?

The text, 'Part Four Blue of White' fades in over the animated image here http://nyti.ms/RJpnp3. Is there any CSS that can do that or is it built into the image?

Kyle Hamilton

That one looks like its done with javascript over an html5 video. You could also do it with a combination of javascript and CSS3 transitions.

brettr

ASKER

Do you have some example code or references that do it?

Kyle Hamilton

Are you using jquery on your site?

SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brettr

ASKER

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.

Kyle Hamilton

anything possible:)

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

remember to be specific

brettr

ASKER

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

lightspeedvt

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

brettr

ASKER

@lightspeedvt: Nice.

I have to use the following after the overlay text divs

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

Open in new window

Otherwise, the paragraph below runs up into the image.

I did try this after the overlay divs:

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

Open in new window

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?

ASKER CERTIFIED SOLUTION

lightspeedvt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

brettr

ASKER

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.

lightspeedvt

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

brettr

ASKER

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

lightspeedvt

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>

Open in new window

Something is wrong with fancybox:

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

padding : 0

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

brettr

ASKER

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: https://www.experts-exchange.com/questions/27975880/Eliminating-line-breaks.html.

lightspeedvt

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

#containerImageOverlay {
    height: 200px;
}

Open in new window

brettr

ASKER

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

lightspeedvt

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

Kyle Hamilton

you have three references to jquery. You only should have one. Use the latest version, and make sure it's above all your other jquery dependent scripts.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>The Slow Crawl To Page One</title>
<meta name="robots" content="noodp, noydir" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://www.bitesizebschool.com/wp-content/thesis/skins/classic/css.css" type="text/css" media="screen, projection" />
<link rel="shortcut icon" href="http://www.bitesizebschool.com/wp-content/uploads/2012/12/shield.png" />
<link rel="canonical" href="http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/" />
<link rel="alternate" type="application/rss+xml" title="Bitesize Business School feed" href="http://www.bitesizebschool.com/feed/" />
<link rel="pingback" href="http://www.bitesizebschool.com/xmlrpc.php" />
<style type="text/css">
html {overflow-y: scroll;}

#containerImageOverlay{
   postion:relative;
}
#bgimageImageOverlay{
   position:absolute;
   z-index:1;
}
#textDivImageOverlay{
   position:absolute;
   z-index:2;
   display:none;
}
</style>


<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <link rel="stylesheet" href="http://www.bitesizebschool.com/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://www.bitesizebschool.com/fancybox/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-847715-9']);
  _gaq.push(['_setDomainName', 'bitesizebschool.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<script type='text/javascript'>
$(function(){
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });
    
    $("#textDivImageOverlay").fadeIn("slow");
});
</script>


<link rel="alternate" type="application/rss+xml" title="Bitesize Business School &raquo; The Slow Crawl To Page One Comments Feed" href="http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/feed/" />
<script type='text/javascript' src='http://www.bitesizebschool.com/wp-includes/js/comment-reply.min.js?ver=3.5'></script>
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<!-- All in one Favicon 4.1 --><link rel="shortcut icon" href="http://www.bitesizebschool.com/wp-content/uploads/2012/12/anvil4transformed1.png" />
</head>
<body class="landing">
<div id="container">
	<div id="header">
		<div class="header_columns_two">
			<div>
				<div class="text_box">
					<p><img class="alignleft size-full wp-image-43" title="Bitesize Business School Logo" src="http://www.bitesizebschool.com/images/shield.png" alt="Bitesize Business School Logo" width="75" height="75" style="padding-right:20px" /></p>
				</div>
			</div>
			<div>
				<ul id="menu-main" class="menu"><li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://www.bitesizebschool.com/">Home</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.bitesizebschool.com/about/">About</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-70"><a href="http://www.bitesizebschool.com/ei/">Entrepreneurial Immersion</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-22"><a href="http://www.bitesizebschool.com/thebook/">The Book</a></li>
</ul>
			</div>
		</div>
		<div class="content">
			<div id="horizontalAlign">
				<div class="text_box">
					 
				</div>
				<div class="social-sprite">
					<ul class="spriteright">
<li class="social-email">
<a target="_blank" href="mailto:info@bitesizebschool.com">Email</a>
</li>
<li class="social-pinterest">
<a target="_blank" href="http://pinterest.com/bitesizebschool/">Pinterest</a>
</li>
<li class="social-twitter">
<a target="_blank" href="http://twitter.com/bitesizebschool">Twitter</a>
</li>
</ul>
				</div>
			</div>
			<div id="post-185" class="hidestickypost top type-post status-publish format-standard category-thebook" itemscope itemtype="http://schema.org/Article">
				<h2 class="headline" itemprop="name"><a href="http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/" rel="bookmark">The Slow Crawl To Page One</a></h2>
				<div class="post_content" itemprop="articleBody">
<div id='containerImageOverlay' style="height:200px;">
<img id='bgimageImageOverlay' src='http://www.bitesizebschool.com/images/thebook/toc.jpg'/></p>
<div id='textDivImageOverlay'>
<p><span style="color:#000000">DAY 35</span></p>
<h2 style="color:#000000">Into The Wild</h2>
</div>
</div>
<div class="social-sprite" style="position:relative;">
<ul class="alignright" style="margin-top:8px;margin-right:10px">
<li class="social-pinterest">
<a href="http://pinterest.com/pin/create/button/?url=http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/&#038;media=http://www.bitesizebschool.com/images/thebook/toc.jpg&#038;description=Initial draft of first 14 chapters" class="pin-it-button" count-layout="horizontal">Pinterest</a>
</li>
</ul>
</div>
<p><span class="dropcap">A</span>draft.  Finally a draft if only one chapter.  And not exactly into the wild but to my editor.  At times it has been a slow crawl.  More from not knowing what happens next than some amount of time passing by.  But things are now starting to fall into place.   Yesterday chapter 1 was sent off for its first editorial. It isn&#8217;t complete but the main content is there. This is ahead of schedule, since the plan was for a draft to be done by December 16.</p>
<p>On December 11, I sent the TOC (table of contents), which includes an outline of chapters, along with sub outlines for each chapter. Basically, I took the earlier book outline and divided each section into chapters. Then stood back (metaphorically speaking) to analyze the content in this new format. After any structural change or presentation of a new viewpoint, it&#8217;s a good idea to let your mind absorb it rather than diving right in. During this small resting period, your mind is subconsciously processing the new information. Generally, this can lead to new ideas.</p>
<p>My editor liked the chapter layout. I&#8217;ve been wondering about a timeline for coming up with a title. At this point, my editor mentioned I should be brainstorming titles and subtitles. I haven&#8217;t yet found one but there are several to stay away from, since a number of books within my genre are using similar titles:<br />
<br/></p>
<ul>
<li>MBA Game Plan</li>
<li>Which MBA Is Right For You?</li>
</ul>
<p>This book isn&#8217;t about acing the MBA application process or getting into a top school. Although there will be some information that falls into those areas.  The book is directed at three general groups:<br />
<br/></p>
<ul>
<li>Those that are entertaining the idea of getting an MBA but just aren&#8217;t sure</li>
<li>Those that know they want an MBA but need a way to shortcut the research process</li>
<li>Entrepreneurs</li>
</ul>
<p>I&#8217;d like to find a title sooner than later. It will certainly make marketing easier.</p>
<p>We talked about book length a little as well. This is still open. I&#8217;m unsure at this point how much content will go into the book. But I have a ballpark figure of where it will land. I&#8217;ll be posting a word progress meter soon, which I plan to start at a target word count of 20,000. This figure will continue to grow.</p>
<p>We also talked about publishing the TOC. There was some initial hesitation on this but then we decided it can&#8217;t hurt anything. Below is the early listing of chapters, which is subject to change:</p>
<p>Chapter 1 &#8211; I’m not sure what I want to do<br />
Chapter 2 &#8211; I know I want an MBA.  Help Me Shortcut The Research<br />
Chapter 3 &#8211; Does An Entrepreneur Need An MBA?<br />
Chapter 4 &#8211; Formats<br />
Chapter 5 &#8211; Cost<br />
Chapter 6 &#8211; Rankings: What’s The Big Deal?<br />
Chapter 7 &#8211; Approach Taken At Various Schools<br />
Chapter 8 &#8211; Electives And Areas of Focus<br />
Chapter 9 &#8211; Entrepreneurship<br />
Chapter 10 &#8211; Alumni Involvement<br />
Chapter 11 &#8211; Tips on Admissions Preparation<br />
Chapter 12 &#8211; Your Profile And Which Options Fit It<br />
Chapter 13 &#8211; Future of the MBA<br />
Chapter 14 &#8211; Interesting Facts About The MBA</p>
<p>In regards to voice (1st, 2nd, 3rd), I will simply speak to the reader as if we&#8217;re having a conversation.  Voice will eventually shake out.  The first chapter will be used as a template for future chapters.  We might later decide to be strict with the voice or continue to let it evolve a little.  With only a chapter 1 draft complete, it is still very early in the process.</p>
<p>It is likely my editor and I will not meet again until after the New Year, at which point we&#8217;ll begin planning our next steps.  Until then, I will be seeking out people to interview and gathering stats.</p>
<p>Questions for you to ponder:<br />
<br/></p>
<ul>
<li>How far along would you go without a title?</li>
<li>Would you have some idea on your book length at this point?</li>
<li>How would you go about estimating it at this early point in the game?</li>
</ul>
<p>Happy Holidays to everyone.</p>
				</div>
				<meta itemprop="datePublished" content="2012-12-21" />
				<meta itemprop="dateModified" content="2012-12-22" />
				<span class="date_on">on</span> <span class="post_date" title="2012-12-21">December 21, 2012</span>
				<p class="comments_intro"><span class="bracket">{</span> <span class="num_comments">0</span> comments&#8230; <a href="#commentform" rel="nofollow">add one</a> <span class="bracket">}</span></p>
				<form id="commentform" method="post" action="http://www.bitesizebschool.com/wp-comments-post.php">
					<p id="comment_form_title">Leave a Comment</p>
					<a rel="nofollow" id="cancel-comment-reply-link" href="/thebook/the-slow-crawl-to-page-one/#respond" style="display:none;">Cancel reply</a>
					<p id="comment_form_name">
						<label for="author">Name <span class="required" title="Required">*</span></label>
						<input type="text" id="author" class="input_text" name="author" value="" tabindex="1" aria-required="true" />
					</p>
					<p id="comment_form_email">
						<label for="email">Email <span class="required" title="Required">*</span></label>
						<input type="text" id="email" class="input_text" name="email" value="" tabindex="2" aria-required="true" />
					</p>
					<p id="comment_form_url">
						<label for="url">Website</label>
						<input type="text" id="url" class="input_text" name="url" value="" tabindex="3" />
					</p>
					<p id="comment_form_comment">
						<label for="comment">Comment</label>
						<textarea name="comment" id="comment" class="input_text" tabindex="4" rows="6"></textarea>
					</p>
					<p id="comment_form_submit">
						<input type="submit" id="submit" class="input_submit" name="submit" tabindex="5" value="Submit" />
					</p>
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="6e458463d2" /></p><input type='hidden' name='comment_post_ID' value='185' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
				</form>
			</div>
		</div>
	</div>
	<div id="footer">
		<div class="text_box">
			<p>© 2012 Bitesize Business School. All Rights Reserved.</p>
		</div>
	</div>
</div>
<script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201251'></script>

</body>
</html>

Open in new window

Kyle Hamilton

You should ask a new question at this point.

brettr

ASKER

I've resolved the script errors and now working through the W3C validations errors. Thanks.