Databases
StackOverflow2013
Postsdbo
POCSS3 - Image Slideshow
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 - Image Slideshow
    text
    copied!<p>I've managed to create a slideshow only with CSS3 alone. Slideshow is working smooth and fine. But the problem is i've defined some headers for each image and it's getting displayed as per the image for the first time and when it starts again for the 2nd time all the headers are getting displayed at once.</p> <p><strong>HTML Code :</strong></p> <pre><code> &lt;ul class="cb-slideshow"&gt; &lt;li&gt; &lt;span&gt;Image 01&lt;/span&gt; &lt;div&gt; &lt;h3&gt;Header 1&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 02&lt;/span&gt; &lt;div&gt; &lt;h3&gt;Header 2&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 03&lt;/span&gt; &lt;div&gt; &lt;h3&gt;Header 3&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;Image 04&lt;/span&gt; &lt;div&gt; &lt;h3&gt;Header 4&lt;/h3&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>CSS Code :</strong> </p> <pre> .cb-slideshow, .cb-slideshow:after { width: 100%; height: 100%; top: 0; left: 0; list-style: none; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background-size: cover; background-position: 100%; background-repeat: none; -webkit-animation: slideshow 32s cubic-bezier(.01,.56,.07,.9) infinite 0s; } .cb-slideshow li div { width: 100%; top: 0; left: 0; font-family: Century Gothic; position: absolute; } .cb-slideshow li div h3 { font-size: 100px; text-align: center; text-transform: uppercase; opacity: 0; color: #000; /*margin: 500px 0 0 35px;*/ -webkit-animation: slideIn 8s; } .cb-slideshow li:nth-child(1) span { background-image: url(1.jpg); } .cb-slideshow li:nth-child(2) span { background-image: url(2.jpg); -webkit-animation-delay: 8s; } .cb-slideshow li:nth-child(3) span { background-image: url(1.jpg); -webkit-animation-delay: 16s; } .cb-slideshow li:nth-child(4) span { background-image: url(2.jpg); -webkit-animation-delay: 24s; } .cb-slideshow li:nth-child(2) div h3 { -webkit-animation-delay: 8s; } .cb-slideshow li:nth-child(3) div h3 { -webkit-animation-delay: 16s; } .cb-slideshow li:nth-child(4) div h3 { -webkit-animation-delay: 24s; } @-webkit-keyframes slideshow { 0% { opacity: 1; -webkit-transform: translateX(2000px); } 5% { opacity: 1; -webkit-transform: translateX(0); } 25% { opacity: 1; -webkit-transform: translateX(0); } 30% { opacity: 0; -webkit-transform: translateX(-2000px); } 35% { opacity: 0; -webkit-transform: translateX(0); } 50% { opacity: 0; -webkit-transform: translateX(0); } 75% { opacity: 0; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(0); } } @-webkit-keyframes slideIn { 0% { opacity: 1; -webkit-transform: translateY(-2000px); } 25% { opacity: 1; -webkit-transform: translateY(0); } 35% { opacity: 1; -webkit-transform: translateY(0); } 45% { opacity: 1; -webkit-transform: translateY(0); } 50% { opacity: 1; -webkit-transform: translateY(0); } 65% { opacity: 1; -webkit-transform: translateY(0); } 75% { opacity: 1; -webkit-transform: translateY(0); } 76% { opacity: 1; -webkit-transform: translateY(0); } 97% { opacity: 1; -webkit-transform: translateY(0); } 100% { -webkit-transform: scale(1.1) rotate(3deg); opacity: 0; } } </pre> <p>Some one please help me in fixing the appearance of the header as per the images.</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload