Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Css Animation help

    Hello I am using weebly for a website and wondering where would I add a code for css animation for a image in this. And can someone help me in making a code for 4 images that appear and come together in jquery and css animation.


    Code:
    /* Resets
    --------------------------------------------------------------------------------*/
    
    ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    	margin: 0;
    	padding: 0;
    }
    
    a img {
    	border: 0;
    }
    
    a {
    	color: #477780;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #43a2b4;
    }
    
    /* General Styling and Structure
    --------------------------------------------------------------------------------*/
    
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #4d4e4e;
    	margin: 0;
    	padding: 0;
    	background: url(Footer_Bg.jpg);
    }
    
    #wrapper {
    	background: url(Main_Bg.jpg);
    }
    
    #wrap-in {
    	background: url(Top_Color_Repeat-x.png) repeat-x;
    }
    
    .header-wrapper {
    	background: url(header-wrapper-gradient.png) bottom repeat-x;
    }
    
    .header-wrapper .container {
    	background: url(newback2.png) center bottom no-repeat;
    	width: 1006px;
    	padding: 0 130px;
    }
    
    #wrap-inner {
    	background: url(wrapper-bg2.png) center top no-repeat;
    }
    
    h2 {
    	font-size: 1.8em;
    	margin: 0;
    	padding: .3em 0;
    	line-height: 1.2;
    	font-family: "PT Sans", Arial, Helvetica, sans-serif;
    	font-weight: normal;
    }
    
    #content h2 {
    	color: #253e42;
    }
    
    p {
    	font-size: 1em;
    	line-height: 1.5;
    	margin: 0;
    	padding: .5em 0;
    }
    
    #content p {
    	color: #4d4e4e;
    }
    
    #content abbr {
    	border-bottom: 1px dotted #8f8f8f;
    }
    
    .container {
    	margin: 0 auto;
    	width: 1006px;
    }
    
    #header-in {
    	padding: 0 50px;
    }
    
    /* Header
    --------------------------------------------------------------------------------*/
    
    #header {
    	width: 100%;
    	height: 170px;
    }
    
    #header,
    #header table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    #header td {
    	vertical-align: middle;
    	text-align: middle;
    }
    
    #logo {
    	padding: 15px 0;
    }
    
    #logo,
    #logo a {
    	font-size: 72px;
    	color: #fff;
    	font-family: "Alex Brush", Arial, Helvetica, sans-serif;
    	line-height: 1.1;
    	-webkit-text-stroke-width: 0.6px;
    }
    
    #logo a:hover {
    	color: #fff;
    }
    
    #header-right {
    	padding: 0 0 0 10px;
    }
    
    #header-right table {
    	width: 1px;
    }
    
    #header-right table,
    #header-right .search,
    #header-right .wsite-search {
    	clear: right;
    	float: right;
    }
    
    #header-right td {
    	padding: 0;
    }
    
    #header-right a {
    	color: #7cdae0;
    }
    
    #header-right a:hover {
    	color: #fff;
    }
    
    /* TOP RIGHT: Phone Number
    --------------------------------------------------------------------------------*/
    
    #header-right .phone-number .wsite-text {
    	display: block;
    	white-space: nowrap;
    	color: #a2b9be;
    	font-size: 12px;
    	font-weight: normal;
    	font-family: Arial, Helvetica, sans-serif;
    	margin: 5px 0 5px 15px;
    }
    
    /* TOP RIGHT: Social Links
    --------------------------------------------------------------------------------*/
    
    .wsite-social {
    	margin: 0 0 0 8px;
    }
    
    #header-right .wsite-social-item {
    	width: 23px;
    	height: 23px;
    	margin: 0 0 0 3px;
    }
    
    #header-right .wsite-social-rss {
    	background: url(rss-h.png) no-repeat;
    }
    
    #header-right .wsite-social-linkedin {
    	background: url(linkedin-h.png) no-repeat;
    }
    
    #header-right .wsite-social-facebook {
    	background: url(facebook-h.png) no-repeat;
    }
    
    #header-right .wsite-social-twitter {
    	background: url(twitter-h.png) no-repeat;
    }
    
    #header-right .wsite-social-mail {
    	background: url(mail-h.png) no-repeat;
    }
    
    /* TOP RIGHT: Search Box
    --------------------------------------------------------------------------------*/
    
    #header-right .search {
    }
    
    .wsite-search {
    	margin: 5px 0 5px 15px;
    }
    
    #header-right .wsite-search-input {
    	width: 168px;
    	height: 14px;
    	border: none;
    	padding: 9px 10px 9px !important;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #434343;
    	font-size: 12px;
    	background: url(input-bg.png) no-repeat;
    	display: inline-block;
    	vertical-align: middle;
    }
    
    #header-right .wsite-search-button {
    	position: relative;
    	width: 32px;
    	height: 32px;
    	color: #010101;
    	font-size: 12px;
    	border: none;
    	margin: 0;
    	padding: 0;
    	background: url(submit-bg.png) no-repeat;
    	display: inline-block;
    	vertical-align: middle;
    }
    
    /* Navigation
    --------------------------------------------------------------------------------*/
    
    #topnav {
    	clear: both;
    	margin: 0 0 0 45px;
    }
    
    #topnav ul {
    	list-style: none;
    	float: left;
    }
    
    #topnav ul li {
    	list-style: none;
    	float: left;
    	background: url(nav-sep.png) right center no-repeat;
    	padding: 0 2px 0 0;
    }
    
    #topnav a {
    	float: left;
    	display: block;
    	color: #b4d2d8;
    	font-size: 15px;
    	text-decoration: none;
    	font-family: "PT Sans Narrow", Arial, Helvetica, sans-serif;
    	padding: 15px;
    	border: 0;
    	outline: 0;
    	line-height: 1;
    	list-style-type: none;
    	text-transform: uppercase;
    }
    
    #topnav li#active a,
    #topnav a:hover {
    	background: url(nav-active.png);
    	border: 0;
    }
    
    /****************************** flyout menus ******************************/
    
    #wsite-menus .wsite-menu li a {
    	font-family: Tahoma, Geneva, sans-serif;
    	padding: 10px;
    	color: #fff;
    	background: #152a2f;
    	border: 0;
    	border-bottom: 1px solid #152a2f;
    }
    
    #wsite-menus .wsite-menu li a:hover {
    	color: #fff;
    	background: #1e383e;
    	border-bottom: 1px solid #193035;
    }
    
    /* main  */
    
    #main {
    	background: url(main-bg.png) 1px top;
    	overflow: hidden;
    	position: relative;
    	top: 1px;
    }
    
    #main-inner {
    	padding: 0 32px;
    }
    
    #content {
    	min-height: 550px;
    	padding: 18px 45px 50px;
    }
    
    #banner {
    	position: relative;
    	background: url(banner-bg.png) no-repeat;
    	padding: 29px 43px 45px 44px;
    	overflow: hidden;
    }
    
    .banner-overlay-t,
    .banner-overlay-r,
    .banner-overlay-b,
    .banner-overlay-l {
    	position: absolute;
    }
    
    /* PAGE TYPE: banner-tall
    --------------------------------------------------------------------------------*/
    
    .tall-header-page .wsite-header {
    	width: 855px;
    	height: 277px;
    	background: url(mr.png) no-repeat;
    }
    
    .tall-header-page .banner-overlay-t {
    	width: 850px;
    	height: 5px;
    	background: #fff;
    	top: 29px;
    	left: 47px;
    }
    
    .tall-header-page .banner-overlay-r {
    	width: 10px;
    	height: 277px;
    	background: url(banner-overlay.png) -10px top no-repeat;
    	top: 29px;
    	right: 42px;
    }
    
    .tall-header-page .banner-overlay-b {
    	width: 845px;
    	height: 5px;
    	background: #fff;
    	bottom: 45px;
    	left: 48px;
    }
    
    .tall-header-page .banner-overlay-l {
    	width: 10px;
    	height: 277px;
    	background: url(banner-overlay.png) top left no-repeat;
    	top: 29px;
    	left: 42px;
    }
    
    /* PAGE TYPE: banner-short
    --------------------------------------------------------------------------------*/
    
    .short-header-page .wsite-header {
    	width: 856px;
    	height: 177px;
    	background: url(banner-short.jpg) no-repeat;
    }
    
    .short-header-page #banner {
    	background: url(banner-short-bg.png) no-repeat;
    }
    
    .short-header-page .banner-overlay-t {
    	width: 850px;
    	height: 5px;
    	background: #fff;
    	top: 29px;
    	left: 47px;
    }
    
    .short-header-page .banner-overlay-r {
    	width: 10px;
    	height: 178px;
    	background: url(banner-overlay.png) -50px top no-repeat;
    	top: 29px;
    	right: 42px;
    }
    
    .short-header-page .banner-overlay-b {
    	width: 845px;
    	height: 5px;
    	background: #fff;
    	bottom: 45px;
    	left: 48px;
    }
    
    .short-header-page .banner-overlay-l {
    	width: 10px;
    	height: 177px;
    	background: url(banner-overlay.png) -40px top no-repeat;
    	top: 29px;
    	left: 42px;
    }
    
    /* PAGE TYPE: no-header
    --------------------------------------------------------------------------------*/
    
    .no-header-page #banner {
    	display: none;
    }
    
    .no-header-page #main-inner {
    	background: url(main-short-header.png) no-repeat;
    }
    
    /* PAGE TYPE: banner-landing
    --------------------------------------------------------------------------------*/
    
    .landing-page #banner {
    	background: url(landing-banner-bg.png) no-repeat;
    }
    
    .landing-page #content {
    	padding-top: 18px;
    }
    
    .landing-page .banner-overlay-t {
    	width: 496px;
    	height: 5px;
    	background: #fff;
    	top: 0;
    	left: 0;
    }
    
    .landing-page .banner-overlay-r {
    	width: 10px;
    	height: 347px;
    	background: url(banner-overlay.png) -30px top no-repeat;
    	top: 0;
    	right: 0;
    }
    
    .landing-page .banner-overlay-b {
    	width: 480px;
    	height: 5px;
    	background: #fff;
    	bottom: 0;
    	left: 7px;
    }
    
    .landing-page .banner-overlay-l {
    	width: 10px;
    	height: 347px;
    	background: url(banner-overlay.png) -20px top no-repeat;
    	top: 0;
    	left: 0;
    }
    
    #bannerleft {
    	float: right;
    	padding: 0;
    	position: relative;
    }
    
    .landing-page .wsite-header {
    	width: 496px;
    	height: 347px;
    	background: url(banner-landing.jpg) no-repeat;
    }
    
    #bannerright {
    	float: left;
    	width: 308px;
    	padding: 60px 50px 0 0;
    }
    
    #bannerright h2 {
    	color: #253e42;
    	font-size: 30px;
    	border: none;
    	margin: 0;
    	padding: 0 0 12px 0;
    }
    
    #bannerright p {
    	color: #4d4e4e;
    	font-size: 14px;
    	margin: 0;
    	padding-bottom: 25px;
    }
    
    #bannerright .wsite-button {
    	margin: 0;
    }
    
    /* PAGE TYPE: splash
    --------------------------------------------------------------------------------*/
    
    .splash-page #header {
    	width: 532px;
    }
    
    .splash-page #banner {
    	width: 527px;
    	height: 161px;
    	padding: 6px 4px 4px 6px;
    	background: url(banner-splash-bg.png) no-repeat;
    }
    
    .splash-page .wsite-header {
    	width: 515px;
    	height: 149px;
    	background: url(banner-splash.jpg) no-repeat;
    }
    
    .splash-page #content-container {
    	width: 528px;
    }
    
    .splash-page #content {
    	width: 528px;
    }
    
    .splash-page #footer {
    	width: 524px;
    }
    
    /* Footer
    --------------------------------------------------------------------------------*/
    
    #footer-wrap {
    	background: url(thewrapper.png) repeat-x;
    }
    
    #footer {
    	background: url(footer-top.png) 32px top no-repeat;
    	padding: 92px 60px 50px;
    	font-size: 12px;
    	color: #fff;
    	font-family: Arial, Helvetica, sans-serif;
    	text-align: right;
    	position: relative;
    	top: -35px;
    }
    
    #footer p {
    	color: #fff;
    }
    
    #footer a {
    	color: #6c8185;
    }
    
    #footer a:hover {
    	color: #8fc9d2;
    }
    
    #footer h3 {
    	font-size: 16px;
    	margin: 0 0 15px;
    	padding: .3em 0;
    	line-height: 1;
    	font-family: "PT Sans", "Myriad Pro", Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	color: #fff;
    }
    
    #footer span {
    	vertical-align: middle;
    }
    
    #footer .wsite-social {
    	vertical-align: middle;
    }
    
    #footer .wsite-social-item {
    	width: 23px;
    	height: 23px;
    }
    
    #footer .wsite-social-rss {
    	background: url(rss.png) no-repeat;
    }
    
    #footer .wsite-social-linkedin {
    	background: url(linkedin.png) no-repeat;
    }
    
    #footer .wsite-social-facebook {
    	background: url(facebook.png) no-repeat;
    }
    
    #footer .wsite-social-twitter {
    	background: url(twitter.png) no-repeat;
    }
    
    #footer .wsite-social-mail {
    	background: url(mail-h.png) no-repeat;
    }
    
    /* Form Customization
    --------------------------------------------------------------------------------*/
    
    .wsite-form-label {
    	display: inline-block;
    	color: #4d4e4e;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	padding: 12px 0 5px 0;
    }
    
    .form-radio-container {
    	color: #4d4e4e;
    	font-size: 1em;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    .wsite-form-input {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	color: #4d4e4e;
    	background: #fff;
    	border: 1px solid #dcdcdc;
    	padding: 8px 4px 5px !important;
    	width: 300px;
    	line-height: 1;
    }
    
    .form-select {
    	color: #4d4e4e;
    	background: #fff;
    	border: 1px solid #dcdcdc;
    	font-size: 1em;
    	font-family: Arial, Helvetica, sans-serif;
    	padding: 3px 4px;
    	width: 320px;
    	height: 27px;
    	line-height: 27px;
    }
    
    /* Buttons
    --------------------------------------------------------------------------------*/
    
    /*
      Buttons are styled with background image sprites. There are 4 unique image files:
       - small & normal-colored  (button_small_grey.png)
       - large & normal-colored  (button_large_grey.png)
       - small & highlight-colored  (button_small_orange.png)
       - large & highlight-colored  (button_large_orange.png)
    
      Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
      as well as an :active state (when the user presses down).
    
      Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
      image files to understand how the liquid-width nature of these buttons work.
     */
    
    /* small */
    
    .wsite-button {
    	color: #1e1e1e !important;
    	font-family: Arial, Helvetica, sans-serif;
    	height: 34px;
    	display: inline-block;
    	font-size: 12px;
    	border: none;
    	font-weight: normal;
    	font-size: 13px;
    	text-decoration: none;
    	padding: 0 15px 0 0;
    	background: url(button.png) no-repeat 100% -105px;
    }
    
    .wsite-button:hover {
    	background-position: 100% -140px;
    }
    
    .wsite-button:active {
    	background-position: 100% -175px;
    }
    
    .wsite-button-inner {
    	height: 34px;
    	line-height: 34px;
    	display: block;
    	font-size: 14px;
    	font-weight: normal;
    	border: none;
    	text-decoration: none;
    	padding: 0 10px 0 25px;
    	background: url(button.png) no-repeat 0 0;
    }
    
    .wsite-button:hover .wsite-button-inner {
    	background-position: 0 -35px;
    }
    
    .wsite-button:active .wsite-button-inner {
    	background-position: 0 -70px;
    }
    
    /* large */
    
    .wsite-button-large {
    	height: 41px;
    	background: url(button_large.png) no-repeat 100% -126px;
    	padding: 0 15px 0 0;
    }
    
    .wsite-button-large:hover {
    	background-position: 100% -168px;
    }
    
    .wsite-button-large:active {
    	background-position: 100% -210px;
    }
    
    .wsite-button-large .wsite-button-inner {
    	height: 41px;
    	line-height: 41px;
    	padding: 0 10px 0 25px;
    	background: url(button_large.png) no-repeat 0 0;
    }
    
    .wsite-button-large:hover .wsite-button-inner {
    	background-position: 0 -42px;
    }
    
    .wsite-button-large:active .wsite-button-inner {
    	background-position: 0 -84px;
    }
    
    /* highlight */
    
    /*
    Making the highlighted versions of the buttons is easy because we just need
    to switch out the background images. This works because the different button
    states (normal, :hover, :active) have their sprite coordinates in the same places.
    */
    
    .wsite-button-large.wsite-button-highlight {
    	background-image: url(button_large_highlight.png);
    }
    
    .wsite-button-large.wsite-button-highlight .wsite-button-inner {
    	background-image: url(button_large_highlight.png);
    }
    
    .wsite-button-highlight {
    	color: #fff !important;
    	background-image: url(button_highlight.png);
    }
    
    .wsite-button-highlight .wsite-button-inner {
    	background-image: url(button_highlight.png);
    }
    Last edited by VIPStephan; 09-21-2012 at 10:46 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •