We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to get fade words in over image?
Posted on 2012-12-21
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?
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
9
6-
6
21 Comments
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.
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>
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.
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.
anything possible:)
post a picture of what you are looking for, or if you have some html, post that.
remember to be specific
post a picture of what you are looking for, or if you have some html, post that.
remember to be specific
Here is demo of formatting based on those snippet:
http://jsfiddle.net/XP4YH/
http://jsfiddle.net/XP4YH/
@lightspeedvt: Nice.
I have to use the following after the overlay text divs
I did try this after the overlay divs:
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?
I have to use the following after the overlay text divs
<p> </p>
<p> </p>
<p> </p>
<br/>
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?
"clear:both" is not working as we have absolute positioning.
Here is updated demo:
http://jsfiddle.net/XP4YH/1/
Here is updated demo:
http://jsfiddle.net/XP4YH/1/
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.
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.
Here ya go: http://bit.ly/XSvNPm.
Ok. I will check it out tomorrow. Also, you have to fix one javascript error at site.
Something is wrong with fancybox:
TypeError: $(...).attr(...).fancybox is not a function
[Break On This Error]
padding : 0
/thebo...ge-one/ (line 57)
<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)
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.
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.
Those javascript issue appears to all browsers. Install this extension for FF and you will see it:
http://getfirebug.com/
http://getfirebug.com/
#containerImageOverlay {
height: 200px;
}
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
Here is a screenshot attached.
screenshot.jpg
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 » 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/&media=http://www.bitesizebschool.com/images/thebook/toc.jpg&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’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’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’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’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’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’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’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’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’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’t hurt anything. Below is the early listing of chapters, which is subject to change:</p>
<p>Chapter 1 – I’m not sure what I want to do<br />
Chapter 2 – I know I want an MBA. Help Me Shortcut The Research<br />
Chapter 3 – Does An Entrepreneur Need An MBA?<br />
Chapter 4 – Formats<br />
Chapter 5 – Cost<br />
Chapter 6 – Rankings: What’s The Big Deal?<br />
Chapter 7 – Approach Taken At Various Schools<br />
Chapter 8 – Electives And Areas of Focus<br />
Chapter 9 – Entrepreneurship<br />
Chapter 10 – Alumni Involvement<br />
Chapter 11 – Tips on Admissions Preparation<br />
Chapter 12 – Your Profile And Which Options Fit It<br />
Chapter 13 – Future of the MBA<br />
Chapter 14 – Interesting Facts About The MBA</p>
<p>In regards to voice (1st, 2nd, 3rd), I will simply speak to the reader as if we’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’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… <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>
Featured Post
An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property
Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month6 days, 5 hours left to enroll
626 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.