Skip to content

Instantly share code, notes, and snippets.

@innovationhero

innovationhero/Pure CSS3 Cycle Slider

Created September 25, 2012 09:08
Show Gist options
  • Save innovationhero/3780770 to your computer and use it in GitHub Desktop.
Save innovationhero/3780770 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pure CSS3 Cycle Slider
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pure CSS3 Cycle Slider</title>
<link rel="stylesheet" type="text/css" media="screen" href="res/css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,400,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<meta name="description" content="A Pure CSS3 Cycling Slideshow! Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers." />
<meta name="keywords" content="CSS3, CSS3 Slideshow, HTML/CSS Tutorials, Smashing Magazine" />
<link rel="canonical" href="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/" />
</head>
<body>
<div class="content">
<h1>Pure CSS3 Cycle Slider</h1>
</div>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="#">
<img src="images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>
<li id="third" class="thirdanimation">
<a href="#">
<img src="images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#">
<img src="images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#">
<img src="images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment