i am working on a Infinite Scrolling banner for a page but i am having issues with its output.
my html code is this: `e
<div class="header">
<img class="first" src="image-1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
<img src="image5.jpg" alt="" />
<img src="image6.jpg" alt="" />
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
</div>
</div>
and my CSS code is this:
`* {margin: 0; padding: 0;}
body {
background: url('background.jpg');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
when i run the html file i see the banner scrolling but i can see the other pictures as well that is not in the banner at the time..
i should be only getting 3 pictures moving at one time and all other pics hidden but they are showing as well..please help..
<!DOCTYPE html>
<html>
<head>
<title>Photo banner</title>
<style>
* {margin: 0; padding: 0;}
body {
background-color: #FF0000;
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Animated Photo Banner</h1>
<p>Lorem ipsum dolor...</p>
</header>
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-5.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-6.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt="">
</div>
</div>
</body>
</div>
Related
I am updating the website at my work with a coworker of mine and we had an awesome idea to have our sponsors scroll at the bottom of the screen to more easily see all of them and to make it look a bit neater than previous designs. The issue is, we have yet to figure out how to get the images to scroll on the same line. We are currently using HTML5 and CSS to attempt to solve this problem but with no luck. I tried to follow an awesome tutorial that someone put out but it was made before HTML5 and therefore does not appear to work, this is what I am following https://designshack.net/articles/css/infinitephotobanner/ I could of course be interpenetrating numbers wrong so I need some explanations. I will include my code in a moment to see if anyone can see my error and correct me, I need an extra set of more experienced eyes. The strange thing is, it seems to be almost working in here yet it isn't working at all for my webpage. Any suggestions? The images are all apearing on different lines and only the top one is scrolling.
style.css
/*body and container*/
* {
margin: 0;
padding: 0;
}
body {
background: url('dark_geometric.png');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 75px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<?pcf-stylesheet path="/_resources/xsl/usu.xsl" site="1_XSL" extension="php"?>
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
<!-- Testing out the scroller -->
<head>
<meta charset="utf-8"/>
<meta name="description" content="description">
<title>Coperate Aggie Sponsers</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</meta>
</head>
<body>
<div id="container">
<header>
<h1>Coperate Aggie Sponsers</h1>
</header>
<div class="photobanner">
<img class="first" src="{{f:21250202}}" width="125" height="75"/>
<img src="{{f:21250199}}" width="75" height="75"/>
<img src="{{f:21250197}}" width="266" height="75"/>
<img src="{{f:21250201}}" width="150" height="75"/>
<img src="{{f:21250195}}" width="236" height="75"/>
<img src="{{f:21250200}}" width="186" height="75"/>
<img src="{{f:21250196}}" width="256" height="75"/>
<img src="{{f:21250198}}" width="92" height="75"/>
<img src="{{f:21250202}}" width="125" height="75"/>
<img src="{{f:21250199}}" width="75" height="75"/>
<img src="{{f:21250197}}" width="266" height="75"/>
<img src="{{f:21250201}}" width="150" height="75"/>
<img src="{{f:21250195}}" width="236" height="75"/>
<img src="{{f:21250200}}" width="186" height="75"/>
<img src="{{f:21250196}}" width="256" height="75"/>
<img src="{{f:21250198}}" width="92" height="75"/>
</div>
</div>
</body>
<!-- /com.omniupdate.div -->
The images themselves to not show here because it is an inside reference on the webpage itself but the concept is there.
It would seem you've implemented the animation wrong, as per your reference. You will need to add the following to your .photobanner CSS:
animation-play-state: running;
animation: bannermove 30s linear infinite;
Here is an example codepen of the same reference you've provided, but in a working state: https://codepen.io/anon/pen/mPXgbW
I linking the style css in my html code and on all HTML editors my code is working absolutely fine except on my site.
Requirement: Hyperlinked images should scroll horizontally.
Expected output: All the images are hyperlinked, and when the page is opened they start scroll automatically.
Actual output: all the images are hyperlinked but the images are linked vertically on my page. On all editors i see the images scrolling.
The website is a wordpress website
Here is my code snippet. CSS source : designshack.com
<!DOCTYPE html>
<html>
<head>
<style>
{margin: 0; padding: 0;}
body {
background: url('dark_geometric.png');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes bannermove {
0% {
margin-left: 0;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes bannermove {
0% {
margin-left: 0;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes bannermove {
0% {
margin-left: 0;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes bannermove {
0% {
margin-left: 0;
}
100% {
margin-left: -2125px;
}
}
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="photobanner">
<a href="mysite">
<img class="first" src="me.jpg" alt="" /> </a>
<a href="site"
<img src="ns.jpg" alt="" /></a>
<a href="mysite"
<img src="gu.jpg" alt="" /></a>
<a href="mysite"
<img src="ri.jpg" alt="" /></a>
<a href="mysite"
<img src="me.jpg" alt="" /></a>
<a href="mysite"
<img src="ns.jpg" alt="" /></a>
<a href="mysite"
<img src="gu.jpg" alt="" /></a>
<a href="mysite"
<img src="ri.jpg" alt="" /></a>
</div>
</body>
</html>
Fix your html syntax first?:
<div class="photobanner">
<a href="mysite">
<img class="first" src="me.jpg" alt="" />
</a>
<a href="site">
<img src="ns.jpg" alt="" />
</a>
<a href="mysite">
<img src="gu.jpg" alt="" />
</a>
<a href="mysite">
<img src="ri.jpg" alt="" />
</a>
<a href="mysite">
<img src="me.jpg" alt="" />
</a>
<a href="mysite">
<img src="ns.jpg" alt="" />
</a>
<a href="mysite">
<img src="gu.jpg" alt="" />
</a>
<a href="mysite">
<img src="ri.jpg" alt="" />
</a>
</div>
I got this banner thingy from a tutorial, but the thing is, instead of the banner continuing in loops, it resets instead. I don't want to use any javascript since we we're not yet tackling it in uni. Can anyone point out where I did wrong and how to fix it? Thanks.
Here are the images:
[1]
[2]
and this is the code I used
HTML:
<div class="photobanner">
<img class="first" src="images/scroll/ban.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner1.png" style="width:350px;height:233px;"/>
<img src="images/scroll/banner3.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner4.jpg" style="width:350px;height:233px;"/>
<img src="images/scroll/banner5.jpg" style="width:350px;height:233px;"/>
</div>
</div>
CSS:
/*body and container*/
* {
margin: 0;
padding: 0;
}
body {
background-image:url(images/banner1takuya.jpg);
background-size: cover;
background-attachment: fixed;
}
#container {
width:865px;
height:auto;
margin:auto;
padding:0 0 30px 0;
background-image:url(images/bg.png);
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
You have the .photobanner width set to 3550px, but the sum of images' widths is 355*5=1775px only.
You need to add 5 more images of the same size and this will work correctly.
I'm trying to get this CSS alternative for a slide show animation for customer Testimonials. I can get it to work in IE and Firefox but it will not work in Chrome. Does anybody know if i need to use some prefixes to fix this issue?
Here is a Demo.
<div class="css-slideshow">
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide1.jpg" alt="class-header-css3" width="1192" height="497" class="alignnone size-full wp-image-172" /><figcaption><strong>CSS3:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide2.jpg" alt="class-header-semantics" width="1192" height="497" class="alignnone size-full wp-image-179" /><figcaption><strong>Semantics:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide3.jpg" alt="class-header-offline" width="1192" height="497" class="alignnone size-large wp-image-178" /><figcaption><strong>Offline & Storage:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide1.jpg" alt="class-header-device" width="1192" height="497" class="alignnone size-full wp-image-177" /><figcaption><strong>Device Access:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide2.jpg" alt="class-header-connectivity" width="1192" height="497" class="alignnone size-large wp-image-176" /><figcaption><strong>Connectivity:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide3.jpg" alt="class-header-multimedia" width="1192" height="497" class="alignnone size-large wp-image-175" /><figcaption><strong>Multimedia:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide1.jpg" alt="class-header-3d" width="1192" height="497" class="alignnone size-large wp-image-174" /><figcaption><strong>3D, Graphics & Effects:</strong></figcaption>
</figure>
<figure>
<img src="http://www.offsetprinting.com/img/custom_images/test_slide2.jpg" alt="class-header-performance" width="1192" height="497" class="alignnone size-large wp-image-173" /><figcaption><strong>Performance & Integration:</strong></figcaption>
</figure>
</div>
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.css-slideshow{
position: relative;
max-width: 1192px;
height: 497px;
margin: 5em auto .5em auto;
}
.css-slideshow figure{
margin: 0;
max-width: 1192px;
height: 497px;
background: #000;
position: absolute;
}
.css-slideshow img{
box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption{
position: absolute;
top: 0;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow-attr{
max-width: 1192px;
text-align: right;
font-size: .7em;
font-style: italic;
margin:0 auto;
}
.css-slideshow-attr a{
color: #666;
}
.css-slideshow figure{
opacity:0;
}
figure:nth-child(1) {
animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
animation: xfade 48s 0s infinite;
}
#keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity: 1;
}
12.5%{
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</
Chrome is a webkit browser, try using the webkit prefix (http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp) like this:
figure:nth-child(8) {
animation: xfade 48s 0s infinite;
-webkit-animation: xfade 48s 0s infinite;
}
#-webkit-keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity: 1;
}
12.5%{
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes xfade{
0%{
opacity: 1;
}
10.5% {
opacity: 1;
}
12.5%{
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Hello I am creating an HTML and CSS slideshow with four sets of images that have four pictures in each. It works perfectly on the first cycle, but after that the images start disappearing and reappearing in strange timings. I have created a JSFiddle to illustrate what I mean..... https://jsfiddle.net/mattmega4/12Lt9yhh/
<figure>
<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"
height="auto" />
</figure>
</div>
<div class="css-slideshow1">
<figure>
<img src="assets/fourBackgrounds/Cyrus.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/fire.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"
height="auto" />
</figure>
</div>
<div class="css-slideshow2">
<figure>
<img src="assets/fourBackgrounds/Cyrus.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/fire.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"
height="auto" />
</figure>
</div>
<div class="css-slideshow3">
<figure>
<img src="assets/fourBackgrounds/Cyrus.jpg" width="45%"
height="auto" />
</figure>
<figure>
<img src="assets/fourBackgrounds/fire.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/goal.jpg" width="45%" height="auto"
/>
</figure>
<figure>
<img src="assets/fourBackgrounds/soldierCat.jpg" width="45%"
height="auto" />
</figure>
</div>
</div>
.css-slideshow {
position: relative;
width: 100%;
height: auto;
}
.css-slideshow figure {
margin: 0;
width: 100%;
height: auto;
position: absolute;
}
.css-slideshow img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.css-slideshow-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow-attr a {
color: #666;
}
.css-slideshow figure:nth-child(1) {
-webkit-animation: xfade 42s 39s infinite;
animation: xfade 42s 39s infinite;
}
.css-slideshow figure:nth-child(2) {
-webkit-animation: xfade 42s 27s infinite;
animation: xfade 42s 27s infinite;
}
.css-slideshow figure:nth-child(3) {
-webkit-animation: xfade 42s 15s infinite;
animation: xfade 42s 15s infinite;
}
.css-slideshow figure:nth-child(4) {
-webkit-animation: xfade 42s 3s infinite;
animation: xfade 42s 3s infinite;
}
.css-slideshow1 {
position: relative;
max-width: 100%;
height: auto;
}
.css-slideshow1 figure {
margin: 0;
width: 100%;
height: auto;
margin-left: 50%;
position: absolute;
}
.css-slideshow1 img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow1 figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.css-slideshow1-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow1-attr a {
color: #666;
}
.css-slideshow1 figure:nth-child(1) {
-webkit-animation: xfade 45s 42s infinite;
animation: xfade 45s 42s infinite;
}
.css-slideshow1 figure:nth-child(2) {
-webkit-animation: xfade 45s 30s infinite;
animation: xfade 45s 30s infinite;
}
.css-slideshow1 figure:nth-child(3) {
-webkit-animation: xfade 45s 18s infinite;
animation: xfade 45s 18s infinite;
}
.css-slideshow1 figure:nth-child(4) {
-webkit-animation: xfade 45s 6s infinite;
animation: xfade 45s 6s infinite;
}
.css-slideshow2 {
position: relative;
width: 100%;
height: auto;
}
.css-slideshow2 figure {
margin: 0;
width: 100%;
margin-top: 50%;
height: auto;
position: absolute;
}
.css-slideshow2 img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow2 figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.css-slideshow2-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow2-attr a {
color: #666;
}
.css-slideshow2 figure:nth-child(1) {
-webkit-animation: xfade 48s 45s infinite;
animation: xfade 48s 45s infinite;
}
.css-slideshow2 figure:nth-child(2) {
-webkit-animation: xfade 48s 33s infinite;
animation: xfade 48s 33s infinite;
}
.css-slideshow2 figure:nth-child(3) {
-webkit-animation: xfade 48s 21s infinite;
animation: xfade 48s 21s infinite;
}
.css-slideshow2 figure:nth-child(4) {
-webkit-animation: xfade 48s 9s infinite;
animation: xfade 48s 9s infinite;
}
.css-slideshow3 {
position: relative;
max-width: 100%;
height: auto;
}
.css-slideshow3 figure {
margin: 0;
width: 100%;
margin-left: 50%;
margin-top: 50%;
height: auto;
margin-left: 50%;
position: absolute;
}
.css-slideshow3 img {
-webkit-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
}
.css-slideshow3 figcaption {
position: absolute;
top: 5px;
color: #fff;
background: rgba(0,0,0, .3);
font-size: .8em;
padding: 8px 12px;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity .5s;
transition: opacity .5s;
}
.css-slideshow3-attr {
max-width: 530px;
text-align: right;
font-size: .7em;
font-style: italic;
}
.css-slideshow3-attr a {
color: #666;
}
.css-slideshow3 figure:nth-child(1) {
-webkit-animation: xfade 51s 48s infinite;
animation: xfade 51s 48s infinite;
}
.css-slideshow3 figure:nth-child(2) {
-webkit-animation: xfade 51s 36s infinite;
animation: xfade 51s 36s infinite;
}
.css-slideshow3 figure:nth-child(3) {
-webkit-animation: xfade 51s 24s infinite;
animation: xfade 51s 24s infinite;
}
.css-slideshow3 figure:nth-child(4) {
-webkit-animation: xfade 51s 12s infinite;
animation: xfade 51s 12s infinite;
}
#-webkit-keyframes "xfade" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
14.67% {
filter: alpha(opacity=100);
opacity: 1;
}
16.67% {
filter: alpha(opacity=0);
opacity: 0;
}
98% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
.image-slideshow{
padding-top: 3.5%;
padding-left: 5.5%;
}
Can somebody elaborate on what I need to add or remove or edit in order for this to work as it should. Thank you