Galeri Foto Dengan Style TV Channel

Slide Galeri foto ini dapat menampilkan foto saat mouseover pada nomor-nomor channel. Seprti layaknya sebuah televisi, gambar atau foto akan di tampilkan pada layar sesuai dengan channel terpilih saat hovering.

DEMO

Lihat juga [DEMO] lainnya disini, efek yang di implementasikan pada tayangan TV Online

Untuk membuatnya silahkan gunakan data berikut ini:

<style type="text/css">

#container {width:224px; height:220px; margin:100px auto; position:relative;}
#case {width:200px; height:120px; border-top:4px solid #cecece; border-right:12px solid #9b9b9b; border-bottom:6px solid #969696; border-left:12px solid #cacaca; background:#e8e8e8; position:relative;}
#tvtop {width:120px; height:2px; border-left:10px solid #efefef; border-right:10px solid #efefef; background:#adadad; position:absolute; top:-3px; left:30px; overflow:hidden;}
#tvbot {width:50px; height:3px; border-left:45px solid #ddd; border-right:45px solid #ddd; background:#aaa; position:absolute; bottom:-4px; left:30px; overflow:hidden;}
#stand2 {width:100px; height:6px; border-bottom:6px solid #969696; border-right:1px solid #9b9b9b; border-left:1px solid #9b9b9b; background:#ddd; position:absolute; bottom:-30px; left:48px; overflow:hidden;}
#stand {width:50px; height:15px; background:#888; position:absolute; bottom:-21px; left:75px; overflow:hidden;}
#tvscreen {width:170px; height:100px; border:4px solid #666; background:#08c; position:absolute; top:6px; left:10px; overflow:hidden; text-align:center; line-height:100px; color:#ff0}

#tvmenu {position:absolute; top:170px; left:50px; width:200px; height:100px; font-family:"courier new", monospace;}
#tvmenu:hover {background:transparent;}
#tvmenu a:visited {color:#fff; text-decoration:none; font-size:14px; background:#000;}
#tvmenu a {color:#fff; text-decoration:none; font-size:14px; background:#000;}
#tvmenu a span {display:none; width:0; height:0; position:absolute; border:0;}
#tvmenu a div {display:none;}
#tvmenu a:hover {color:#fff; background:#c00; text-decoration:none;}
#tvmenu a img {display:block; position:absolute; top:-84px; left:38px; width:0; height:0; border:0;}
#tvmenu a:hover img {display:block; position:absolute; top:-155px; left:-24px; width:170px; height:100px; border:0;}
#tvmenu a:hover .line {display:block; position:absolute; top:25px; left:0px; width:15px; height:2px; overflow:hidden; background:#c00;}
#tvmenu a:hover .line1 {display:block; position:absolute; top:25px; left:0px; width:35px; height:2px; overflow:hidden; background:#c00;}
#tvmenu a:hover .line2 {display:block; position:absolute; top:25px; left:0px; width:60px; height:2px; overflow:hidden; background:#c00;}
#tvmenu a:hover .line3 {display:block; position:absolute; top:25px; left:0px; width:85px; height:2px; overflow:hidden; background:#c00;}
#tvmenu a:hover .line4 {display:block; position:absolute; top:25px; left:0px; width:110px; height:2px; overflow:hidden; background:#c00;}

#tvmenu a:hover .point {display:block; position:absolute; top:20px; left:5px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point1 {display:block; position:absolute; top:20px; left:25px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point2 {display:block; position:absolute; top:20px; left:50px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point3 {display:block; position:absolute; top:20px; left:75px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
#tvmenu a:hover .point4 {display:block; position:absolute; top:20px; left:100px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}
</style>

     <div id="container">
 <div id="case">
 <div id="tvtop"></div>
 <div id="tvbot"></div>
 <div id="stand2"></div>
 <div id="stand"></div>
 <div id="tvscreen">MyTV</div>
 </div>

 <div id="tvmenu">
 <a href="#nogo">&nbsp;1&nbsp;<img src="../graphics/men1.jpg" alt="" /><span class="line">.</span><span class="point">.</span></a>
 <a href="#nogo">&nbsp;2&nbsp;<img src="../graphics/men2.jpg" alt="" /><span class="line1">.</span><span class="point1">.</span></a>
 <a href="#nogo">&nbsp;3&nbsp;<img src="../graphics/men3.jpg" alt="" /><span class="line2">.</span><span class="point2">.</span></a>
 <a href="#nogo">&nbsp;4&nbsp;<img src="../graphics/men4.jpg" alt="" /><span class="line3">.</span><span class="point3">.</span></a>
 <a href="#nogo">&nbsp;5&nbsp;<img src="../graphics/men5.jpg" alt="" /><span class="line4">.</span><span class="point4">.</span></a>
 </div>
     </div>

Sumber: cssplay