Advanced tcycle
Want your tcycle to look just like nivo slider, just less resource intensive? Set up your structure something like this:
<div class="tcycle">
<a class="slide1" href="" title="">
<strong></strong>
<p></p>
<span></span>
</a>
</div>
- Repeat the <a> for additional slides
- Set dimensions on .tcycle a
- Position text with the left:, top:, and bottom: entries, and width on p
Drop this CSS into your stylesheet, adjusting appropriately for your task at hand:
.tcycle {box-shadow:0 1px 5px 0 #4a4a4a;width:670px;height:195px;overflow:hidden;}
.tcycle a {display: block;width:100%;height:100%;text-decoration:none;position:relative;}
.tcycle strong, .tcycle p, .tcycle span{opacity: 0.8;position:absolute;left:40px;}
.tcycle strong { color: #191919; font: bold 21px questrial, serif;top:20px; }
.tcycle p{color:#333;font-size:14px;width:350px;top:80px;}
.tcycle span{border-radius:5px;color:#fff;background:#002034;padding:5px 10px;bottom:20px;}
.tcycle a:hover span{text-decoration:underline;}
.slide1{background:url(/images-design/banner/01.jpg)}
.slide2{background:url(/images-design/banner/02.jpg)}
.slide3{background:url(/images-design/banner/03.jpg)}
This structure also has the advantage that the entire slide is clickable, rather than just the call-to-action.