I have multiple images positioned using the CSS position: absolute attribute. I want them to grow on hover/mouseover. However, when I try to apply the transform: scale attribute to the images, the images jump repeatedly below all the images and grow there instead of growing in their defined position.
How can I keep the images in their correct positions while also making them grow on hover/mouseover?
I apologize in advance for the frankenstein code.
JS, CSS, HTML
function changeContent(description) {
console.log(description);
var MyDesc = document.getElementById(description);
document.getElementById('content').innerHTML = MyDesc.value;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
img, span{
display:table-cell;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
#main {
width: 100%;
}
#photo {
display:flex;
}
#photo > #photo-center {
width:100%;
position:relative;
display: block;
margin-left: auto;
margin-right: 0px;
}
/* Diagram */
#large{
width:100%;
}
/* Server Ops 2 - Bob */
#ops2{
width:17%;
position:absolute;
left:44%;
right:0px;
top:0%;
z-index:1;
}
/* Server Ops 1 - Alice */
#ops1{
width:17%;
position:absolute;
left:85%;
right:0px;
top:0%;
z-index:1;
}
/* QA Black Box - Steve */
#qablack{
width:10%;
position:absolute;
left:60%;
right:0px;
top:37%;
z-index:1;
}
/* QA Load Testing - Jerry */
#qaload{
width:17%;
position:absolute;
left:63%;
right:0px;
top:68%;
z-index:1;
}
/* QA Software Engineer - Alex */
#qasoft{
width:17%;
position:absolute;
left:73%;
right:0px;
top:38%;
z-index:1;
}
/* Manager 2 - Peter */
#mang2{
width:15%;
position:absolute;
left:22%;
right:0px;
top:-6%;
z-index:1;
}
/* Manager 1 - Craig */
#mang1{
width:13%;
position:absolute;
left:6%;
right:0px;
top:-4%;
z-index:1;
}
/* Software Engineer 1 - Bill */
#soft1{
width:15%;
position:absolute;
left:0%;
top:50%;
z-index:1;
}
/* Software Engineer 2 - Jared */
#soft2{
width:9%;
position:absolute;
left:3%;
right:0px;
top:23%;
z-index:1;
}
<strong><div style="font-size:20px" class="container" id="content">Hover over a character to discover their Workflow Woes!</div></strong>
<div id="main">
<div id="photo">
<div id="photo-center">
<img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:traditional3.jpg" id="large">
<div class="grow">
<a onmouseover="changeContent('desc1')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops2.png" id="ops2"></a>
<input type="hidden" id="desc1" value="apples are delicious">
</div>
<div class="grow">
<a onmouseover="changeContent('desc2')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops1.jpg" id="ops1"></a>
<input type="hidden" id="desc2" value="Oranges are healthy">
</div>
<div class="grow">
<a onmouseover="changeContent('desc3')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer1.png" id="soft1"></a>
<input type="hidden" id="desc3" value="Candy is tasty!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc4')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer2.png" id="soft2"></a>
<input type="hidden" id="desc4" value="hhhh!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc5')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_black_box.png" id="qablack"></a>
<input type="hidden" id="desc5" value="aaaa!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc6')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_load.png" id="qaload"></a>
<input type="hidden" id="desc6" value="pppp!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc7')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_soft_engineer.png" id="qasoft"></a>
<input type="hidden" id="desc7" value="lollll!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc8')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager1.png" id="mang1"></a>
<input type="hidden" id="desc8" value="bowowow!">
</div>
<div class="grow">
<a onmouseover="changeContent('desc9')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager2.png" id="mang2"></a>
<input type="hidden" id="desc9" value="meowww!">
</div>
</div>
</div>
</div>
(Run the Snippet then open in Full Page)
Try to add Class "grow" at "img" element, Instead of Div element
Related
A section of my form is a row of data that is formatted responsively with media queries. The user may add additional rows. This is done using JavaScript (jQuery). The problem is, when I clone the new row, not all changed formatting, as laid out in media queries, is read, instead, reverting to the formatting in the original stylesheet.
Row (HTML with some PHP)
<div class="WFormSection BOLItems">
<div class="WTableHead">
<div class="alignleft FormCol60 WHeadText">Units</div>
<div class="space"></div>
<div class="alignleft FormCol20 WHeadText">Haz</div>
<div class="space"></div>
<div class="alignleft FormColMid WHeadText">Description of Articles</div>
<div class="space"></div>
<div class="alignleft FormCol60 WHeadText">NMFC</div>
<div class="space"></div>
<div class="alignleft FormCol60 WHeadText">Class</div>
<div class="space"></div>
<div class="alignleft FormColTiny WHeadText">Weight</div>
</div>
<div class="clear"></div>
<!--=============================== -->
<!-- R O W 0 -->
<!--=============================== -->
<div class="parent-group">
<div class="form-group">
<hr>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">Units: </div>
<input type="text" id="Pieces(0)" name="Pieces[0]" maxlength="5" size="4" value="<?PHP echo($Pieces[0]); ?>" class="inputtext right FirstCell" placeholder="Units">
</div>
<div class="space"></div>
<div class="alignleft FormCol20 Center TD Inline">
<div class="ColTitle">Hazmat: </div>
<label class="CBContainer CB">
<input type="checkbox" id="HM(0)" name="HM[0]" value="X" <?PHP if($HM[0]=="X"){echo('checked="Checked"');} ?>>
<span class="Checkmark"></span>
</label>
</div>
<div class="space"></div>
<div class="ColTitle">Description:</div>
<div class="alignleft FormColMid TD">
<div class="DescriptionTextarea">
<textarea class="txt" id="Descr(0)" name="Descr[0]" maxlength="53" placeholder="Description"><?PHP echo($Descr[0]); ?></textarea>
<input class="FormCol30 ChrCt" name="Output" id="Output" size="5" value="53" readonly disabled />
</div>
</div>
</div>
<div class="space"></div>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">NMFC: </div>
<input type="text" id="NMFC(0)" name="NMFC[0]" maxlength="10" size="8" value="<?PHP echo($NMFC[0]); ?>" class="inputtext right" placeholder="NMFC">
</div>
<div class="space"></div>
<div class="alignleft FormCol60 TD Inline">
<div class="ColTitle">Class: </div>
<?PHP echo PopSelect('Class[0]', $ClassArr, $Class[0], 'DropBox2',1,0,'',0,'','','Class(0)'); ?>
</div>
<div class="space"></div>
<div class="alignleft FormColTiny TD Inline">
<div class="ColTitle">Weight: </div>
<input type="text" id="Weight(0)" name="Weight[0]" maxlength="5" size="4" value="<?PHP echo($Weight[0]); ?>" class="inputtext right EndCell" data-datarow=0 placeholder="Weight">
</div>
<div class="space"></div>
<div class="alignleft form-group">
<a class="RowDeleteButton del" id="DeleteRow" href="javascript:void(0)"> X </a>
</div>
<div class="Clear"></div>
</div> <!-- child-group -->
<div class="clearfix"></div>
</div> <!-- parent-group -->
What's happening here is that the original row is completely horizontal, thus the original column header (WHeadText). At smaller screen sizes, the header goes away, and the labels (ColTitle) come into play. So, at a certain screen size, the class "WHeadText" is hidden, and the class "ColTitle" appears. This works fine in the original row. In the cloned rows, neither the header, nor the labels appear, and other formatting is not changed, as well.
JavaScript
<script>
function CreateNewRow()
{
var ChildCount = $('.child-group').length;
if(ChildCount == 7)
{
alert("Sorry, 8 is the maximum number of rows");
}
else
{
var len = window.LastArrayValue;
window.LastArrayValue = len + 1;
$('.parent-group').clone(true, true).find(':input').each(function(idx, ele)
{
var ename = ele.name;
var eid = ele.id
var ArrayValue = len+1;
ele.name = ename.replace(/(\[\/?[^\]]*\])/g, "["+ArrayValue+"]");
ele.id = eid.replace(/(\(\/?[^\]]*\))/g, "("+ArrayValue+")");
if (typeof $(this).data('datarow') !== 'undefined'){$(this).data('datarow', ArrayValue);} // Skip if there is not a datarow attribute
if(ele.type == "checkbox"){ele.checked = false;}
else{ele.value = '';}
}).end().find('.form-group').toggle(true).end()
.toggleClass('parent-group child-group').hide()
.appendTo('#container').slideDown('slow',function()
{
$("#container").find(".FirstCell").last().focus();
});
}
}
</script>
I can, of course, instigate the class changes with Javascript, but formatting changes more then once, and each time most of the formatting you see below changes, so that presents a real problem, in addition to the possible differences there may be detecting viewport by two different methods.
CSS (Just for one example, here is one media query change):
.WFormSection.BOLItems .ColTitle {display:block; padding-top:15px; width:75px; margin-right:15px; text-align:Left; clear:left; font-weight:bold;}
.WFormSection.BOLItems .CBContainer {margin-top:15px;}
.WFormSection.BOLItems .WTableHead {display:none;}
.WFormSection.BOLItems .TD {float:left;}
.WFormSection.BOLItems .DescriptionTextarea {margin-bottom:10px;}
.WFormSection.BOLItems .DescriptionTextarea textarea {width:80%;}
.BOLItems .FormColSmall, .BOLItems .FormColMedium, .BOLItems .FormColMid, .BOLItems .FormColWide {max-width:100%; padding-right:3px;}
CSS From Original StyleSheet (since it was requested):
.WFormSection {border:1px solid #969696; padding:15px; background:url(../images/comment-form_bg.png) 0 0 repeat-x #e9e9e9; margin-bottom:15px; position:relative;}
.WFormSectionTitle {color:#0F61AC; font-weight:500; font-size:16px; width:100%; text-align:center; margin-bottom:15px;}
.WFormSection .one_third {width:28%;}
.WFormSection .one_fourth {width:20%;}
.WFormSection .one_fifth {width:16.800%;}
.WFormSection .one_half {width:40%;}
.WFormSection .Split, .TrackBox .Split {float:left; width:48%; padding:0 1%;}
.WFormSection .CheckBox {width:100%;}
.WFormSection .StateDrop, .WFormSection .DateDrop, .WFormSection .SmallDrop, .WFormSection .LongDrop {padding:10px 10px 19px 10px; margin-top:4px;}
.WFormSection.SubnitBox {padding:8px; margin-top:20px; text-align:center;}
.WFormSection.SubmitBox .RadioHorizontal {display:inline-block; margin-left:20px;}
.WFormSection.Table {padding-bottom:0; margin-bottom:0;}
.WFormSection .VerticalSpace20 {height:20px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.WFormSection em {display:inline; padding-left:12px; font-style:normal;}
.WHeadText {color:#000000; display:block; font-weight:600}
.WHeadText {font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:18px; width:100%; margin:3px 0; padding:7px 10px 7px 2px;}
.WFormSection .form-group .DescriptionTextarea {height: 54px;}
.WFormSection .form-group .DescriptionTextarea textarea {width:85%; height:100%; line-height:110%;}
.WFormSection .form-group .DescriptionTextarea .ChrCt {display:inline-block; border:none; background:transparent; margin-left:10px; color:#D78E21; font-size:16px; font-weight:600;}
.ColTitle {display:none;}
.CBContainer {display:block; position:relative; padding-left:24px; margin-bottom:8px; cursor:pointer; font-size:14px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.CBContainer.RB {display:inline-block; padding-left:30px;}
/* Hide the browser's default checkbox */
.CBContainer input {position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
/* Create a custom checkbox */
.CBContainer.CB .Checkmark {position:absolute; top:0; left:0; height:20px; width:20px; background-color:#FFFFFF; border:1px solid #585858;}
.CBContainer.RB .Checkmark {position:absolute; top:0; left:0; height:22px; width:22px; background-color:#FFFFFF; border:1px solid #585858; border-radius:50%;}
/* On mouse-over, add a grey background color */
.CBContainer:hover input ~ .Checkmark {background-color:#CCCCCC;}
/* When the checkbox is checked, add a blue background */
.CBContainer input:checked ~ .Checkmark {background-color:#2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.CBContainer.CB .Checkmark:after, .CBContainer.RB .Checkmark:after {content:""; position:absolute; display:none;}
/* Show the checkmark when checked */
.CBContainer input:checked ~ .Checkmark:after {display:block;}
/* Style the checkmark/indicator */
.CBContainer.CB .Checkmark:after {left:7px; top:3px; width:5px; height:12px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.CBContainer.RB .Checkmark:after {left:6px; top:6px; width:8px; height:8px; border-radius:50%; background:#FFFFFF;}
.TD {} /* Not defined in original stylesheet */
.BOLItems {} /* Not defined in original stylesheet */
/* The other FormCol settings, as well as "Space" simply define the width and padding */
The problem here was simply an extra closing div. It has been commented out.
I'm using a popup window from https://codepen.io/pedrobenoit91/pen/aJGzYg and have been able to tweak it get it to be responsive. Here is my test page: Responsive Popup Window Test Here's the tweaked coding I've used:
HTML5 Page
<script type="text/javascript" src="/js/popupwindow.js"></script>
<div class='popup'>
<div class='popwin'>
<span style="font-size:1.50em; color:#2e5c9d;">CIS Miami Is Here for Our Students & Families</span>
<p>
See what we're doing and view resources »
<br>
COVID-19 is impacting our students and families in ways that no one could have possibly imagined. Communities In Schools of Miami remains dedicated to ensuring all
of our students and families have the crucial resources they urgently need at this time, but we can't do it without you.
<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<div style="display:block; padding:0.50em 0;">
<div class="btnOrange"><a class="btn" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SDSKUTE5VQXCW&source=url"><b>DONATE TO CIS MIAMI <i class="fas fa-angle-double-right"></i></b></a></div>
</div>
<div class="right"></i> CLOSE</div>
</p>
</div>
</div>
SCRIPT
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
STYLESHEET
#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000;
filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; z-index:100; display:none; }
.popup { width:100%; margin:0 auto; display:none; position:fixed; top:0; left:0; z-index:101; } /* Added top and left for positioning */
.popwin { min-width:90%; width:90%; min-height:150px; margin:2.0em auto; background:#fff; position:relative;
z-index:103; padding:0.5em 1.0em; border-radius:5px; box-shadow:0 2px 5px #000; } /* Changed with to percentages for responsive. Margin determines height from top */
.popwin p { clear:both; color:#555555; /* text-align:justify; */ font-size:1.2em; font-family:sans-serif; }
.popwin a { text-decoration:none; }
.popwin p a { color:#d91900; font-weight:bold; }
.popwin .x { float:right; height:35px; left:0px; position:relative; top:-25px; width:34px; }
.popwin .x:hover { cursor:pointer; }
a.closepop:link, a.closepop:visited, a.closepop:active { text-decoration:none; color:#444; }
a.closepop:hover { color:#444; text-decoration:none; }
It works, but on smaller devices, like my phone, the popup doesn't scroll so I can't see all of the content or get to the button to close it. I've been trying different things with no luck so far. Any help would be appreciated.
I want to make text animation like this slide in from left. There are three text fields
Sports Cargo Bag
$14
Sale $25
I want these text to be set from jquery and slide in from the left like this link
. This is my code JsFiddle, i have set these headtext but i want to use jquery method to set these texts
html
<div id="mainContainer">
<div id="logdo">
<img src="http://i.share.pho.to/7346a9ca_o.gif"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/9064dfe4_o.jpeg"/></div>
<div id="headlineText">
<p id="headline1Txt" ></p>
<p id="headline2Txt" ></p>
<p id="headline3Txt" ></p>
</div>
<button class="btn btn-primary" id="ctaBtn" type="button">SHOP NOW</button>
</div>
css
* {
margin:0;
padding:0;
}
#mainContainer{ text-align: center;
width:160px;
height:600px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:5px solid #BACAE4;
overflow: hidden;
position: fixed;
}
#images{
position:absolute;
top:200px;
left:3px;
right:1286px;
Width:130px;
height:152px;
}
#introImg{
position:absolute;
top:40px;
left:7px;
right:11px;
}
#headlineText p
{
text-align: center;
position: absolute;
top:60px;
left:-120px;
Width:120px;
height:269px;
line-height:1.0;
overflow:hidden;
}
#ctaBtn{
position:absolute;
top:540px;
left:26px;
right:0px;
Width:106px;
height:28px;
}
Here is the simplest method:
Replace all our current javascript in your fiddle with $("#mainContainer").hide().show('slide');.
If you want you can use .delay(500) to make it wait a bit before the animation: $("#mainContainer").hide().delay(500).show('slide');
i am trying to show/hide a div on hover. my code works on the first item in the list, but not on the others. http://codepen.io/adamin/pen/yHcni
HTML
<div id="track" class="ani" name="#tomday">
<h1>listen</h1>
<h2>who we want to be</h2>
</div>
<div id="track" class="ani" name="#next">
<h1>next</h1>
<h2>thing</h2>
</div>
<div class="clear"></div>
<div id="tomday" style="" class="video off"></div>
<div id="next" style="" class="video off"></div>
css
.off {
display:none;
}
.on {
display:block;
}
.clear:after {
clear:both;
}
.ani {
transition:1s;
}
.invisible {
color:transparent;
}
#track {
margin:12% 1% 1% 1%;
height:12%;
width:12%;
color:rgba(211, 50, 9, 0.05);
float:left;
}
#track:hover {
margin-top:15%;
color:rgba(211, 50, 9, 1)
}
.video {
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:-1;
background:red;
opacity:0.5;
}
jQuery
$("#track").hover(function () {
var thisvideo = $(this).attr('name');
$(thisvideo).toggleClass("on");
});
In your jquery, just replace #track by .ani for use the class of the element.
change to
<div class="track" class="ani" name="#tomday">
<h1>listen</h1>
<h2>who we want to be</h2>
</div>
<div class="track" class="ani" name="#tomday">
<h1>listen</h1>
<h2>who we want to be</h2>
</div>
<div class="clear"></div>
<div id="tomday" class="video off"></div>
CSS:
.off {display:none;} .on {display:block;}
.clear:after {clear:both;} .ani {transition:1s;} .invisible {color:transparent;}
.track {margin:12% 1% 1% 1%; height:12%; width:12%; color:rgba(211,50,9,0.05); float:left;}
.track:hover {margin-top:15%; color:rgba(211,50,9,1)}
.video {height:100%; width:100%; position:fixed; top:0; left:0; z-index:-1; background:red; opacity:0.5;}
JS:
$(".track").hover(function() {
var thisvideo = $(this).attr('name');
$(thisvideo).toggleClass("on");
});
Any id must be unique. If you want to use it in multiple places just make it a class instead ;)
Here's your demo http://codepen.io/anon/pen/eLruh
Demo
HTML
<div id="track" class="ani" name="#tomday">
<h1>listen</h1>
<h2>who we want to be</h2>
</div>
<div id="track2" class="ani" name="#next">
<h1>next</h1>
<h2>thing</h2>
</div>
<div class="clear"></div>
<div id="tomday" style="" class="video off"></div>
<div id="next" style="" class="video off"></div>
css
.off {
display:none;
}
.on {
display:block;
}
.clear:after {
clear:both;
}
.ani {
transition:1s;
}
.invisible {
color:transparent;
}
#track, #track2 {
margin:12% 1% 1% 1%;
height:12%;
width:12%;
color:rgba(211, 50, 9, 0.05);
float:left;
}
#track:hover, #track2:hover {
margin-top:15%;
color:rgba(211, 50, 9, 1)
}
.video {
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:-1;
background:red;
opacity:0.5;
}
jQuery
$(".ani").hover(function () {
var thisvideo = $(this).attr('name');
$(thisvideo).toggleClass("on");
});
This question already has answers here:
Fade background image in and out with jQuery?
(5 answers)
Closed 9 years ago.
I am wondering, because I am not good with JavaScript or jQuery, how to I fade a background of this:
html {
background-image:url(image.png);
}
to a different background image without fading the whole document, but only the background every 2 seconds?
I have no idea how to do this. I have been researching and trying to do this myself, but no success for the past three days.
Any help is greatly appreciated.
If you need the code, here it is:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Buddies Server Home</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="body">
<div class="nav">
<div class="header">
<img src="images/Logo.png" />
</div>
<div class="right-side">
<img src="images/home.png" />
</div>
<div class="nav-buttons">
<img src="images/buttons/servers.png" />
<img src="images/buttons/about.png" />
<img src="images/buttons/forums.png" />
</div>
<div class="notif_container">
<div class="notif"><p id="notif">NOTIFICATION: Buddies Network is under maintenance. Thank you for your patience.</p></div>
</div>
</div>
</div>
<div class="content">
<div class="post">
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 1</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/23/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body</p></td>
</tr>
</table>
<table id="post">
<tr>
<td id="title"><h2>Blog Entry 2</h2></td>
</tr>
<tr>
<td><h5 id="author">DirectX3DNerd, 7/1337/13</b></td>
</tr>
<tr>
<td id="body"><p>Post Body - Jacob was Here</p></td>
</tr>
</table>
</div>
<div class="side_bar">
<table id="side_bar">
<tr>
<td><h2>Welcome!</h2></td>
</tr>
<tr>
<td><p>Welcome to Buddies Netowrk! Home of the Minecraft, Ace of Spades, and Team Fortress 2 server! If you want to play on one of the servers, click here</p></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<b>© Buddies Network, 2012-2014.</b>
</div>
</body>
<script>
var image1 = 'images/bg.png';
var image2 = 'images/bg2.png';
function fade() {
$(html).css('background-image', image1);
$(html).css('background-image', image1);
}
</script>
</html>
styles.css
/* Document Properties */
html {
background: url('../images/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Server List Properties */
.server_list {
width:500px;
height:400px;
margin: auto;
}
.server_list li {
width:60%;
margin:auto;
}
/* Font Properties */
b{
font-family:"Times New Roman", Times, serif;
}
h1{
font-family:"Times New Roman", Times, serif;
}
p{
font-family:"Times New Roman", Times, serif;
}
/* Page Template */
/* Navigation Bar*/
.header {
position:relative;
left:-1px;
}
.right-side {
position:absolute;
left:850px;
top:1px;
}
.notif {
background-color:#00FF15;
position:relative;
top:4px;
}
#notif {
color:#000000;
font-family:"Lucida Console", Monaco, monospace;
/*font-size:79%;*/
width:800px;
height:35px;
margin:auto;
position:relative;
top:10px;
overflow:auto;
word-wrap:break-word;
}
.nav {
background-color:#FFFFFF;
min-height:79px;
min-width:100%;
position:fixed;
top:0px;
left:0px;
right:0px;
}
/* Footer */
.footer {
background-color:#eee;
min-width:100%;
height:20px;
position:fixed;
left:0px;
bottom:0px;
}
/* Blog Post styles */
.post {
background-image:url('../images/trans_bg.png');
color:white;
position:absolute;
z-index:-1;
top:200px;
left:350px;
width:550px;
height:750px;
}
#post {
position:relative;
left:0px;
padding:0;
margin:0;
}
#title {
position:relative;
top:-10px;
left:0px;
}
#author {
position:relative;
top:-50px;
left:0px;
}
#body {
position:relative;
top:-80px;
left:0px;
}
/* Misc */
.side_bar {
background-image:url('../images/trans_bg.png');
color:white;
position:fixed;
top:190px;
left:5px;
width:250px;
word-wrap:break-word;
overflow:hidden;
}
/* link Properties */
a:link { color:white; }
a:visited { color:white; }
a:hover { color:white; }
a:active { color:white; }
add this
jQuery(document).ready(function() {
$("html").css({
'background-image': ''
});
$("html").animate({ background:'url(image.png)'},350);
});
That's only for the first image fade effect. If you want this effect for different images you might want to try this plug-in I'm sure you will get cool output from it.