socialw { width: 236px; margin-top: 100px; margin-left: auto; margin-right: auto; overflow: auto; height: 100%; } #social1 { border: 1px solid #292929; width: 37px; height: 62px; margin-left: 1px; float: left; overflow: hidden; } #social2,#social3,#social4,#social5 { border: 1px solid #292929; width: 37px; height: 62px; float: left; margin-left: 10px; overflow: hidden; } /* ANIMATIONS */ .animate { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animate.queue { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } .animate.queue2s { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay: 2s; animation-delay: 2s; } .animate.queue3s { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; } .animate.queue4s { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } /* Fade In Down */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-100px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-100px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-100px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-100px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } /* Fade In Down */ /* Social 1 Animation */ #social1 {position:relative;} #social1 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social1:hover img{ margin-top:-62px; } #social1 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 2 Animation */ #social2 {position:relative;} #social2 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social2:hover img{ margin-top:-62px; } #social2 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 3 Animation */ #social3 {position:relative;} #social3 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social3:hover img{ margin-top:-62px; } #social3 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 4 Animation */ #social4 {position:relative;} #social4 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social4:hover img{ margin-top:-62px; } #social4 .details{ position:absolute; left:0; top:0; z-index:-1; } /* Social 5 Animation */ #social5 {position:relative;} #social5 img{ position:absolute; left:0; top:0; -webkit-transition: margin-top; -webkit-transition-timing-function: ease-in; -webkit-transition-duration: 250ms; } #social5:hover img{ margin-top:-62px; } #social5 .details{ position:absolute; left:0; top:0; z-index:-1; } -->
Image Slider By helperblogger.com The slide is a linking image Pure Javascript. No jQuery. No flash. #htmlcaption
- See more at: http://www.helperblogger.com/2012/07/javascript-image-slider-for-blogger.html#sthash.1dckUYyC.dpuf

Sunday, October 14, 2012

Posted by at