web design: Slider Transparant Image

Slider Transparant Image

Pada pertemuan kali ini saya akan berbagi Slder dengan tampilan Transparant Image menggunakan Jquery atau disebut dengan javasript. dengan tampilan transparant sebelum terfokuskan pada judulnya dan akan nampak lebih jelas jika sudah gilirannya atau kita memilih gambar tersebut.

Tag HTML nya

<div class="sixtyright">
  <div class="carousel ">
   <div class="holder">
    <div class="right">
</div>
<div class="left">
</div>
<ul id="team">
<li><a href="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidW610MdEB4va0lfjszaq76GsncoJxkp4dbbz7Qi9VsDg9B1J72Dc5QFP9ciGCI-GkPlrE6AvjEIdRtasByIiSKEhuRSCfexMs2W2M8KXMgBg4i1DOC0oclJW3yoF7u7CCSj6KbJNNQp6S/s1600/naruto.jpg" alt=slider image transparant" /></a></li>
<li><a href="2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidw4406oY5q0xKvFGHUVTIQQtUGaU7qxUaRUe7t49yg6QkaOWZ3E0S2hzFCxHF_QlIn0MRjdkQ-pQLdJZauC9AVjP99sa7BUiCD3tlM8aIrVccVzNQnrVdvU82n3p6wiWdBHxrlCcmjvTA/s1600/luffy.jpg" alt="slider image transparant" /></a></li>
<li><a href="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiP2-M4iBLbZfTN6mnjP_7OAS1N71sIAj1_-KhBpxRlXPI-dfVJ7IJFWNLFDsgT5CLsFCr47PKvC1UQUyOdGEj1eKZfzMthhpJdxEitbMmTdQcFbit-I_XtfO-HpunlnUjN3Xsz4-gCabf/s1600/ichigo.jpg" alt="slider image transparant" /></a></li>
<li><a href="4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf76sNNhgc7FjJHpQFTQv7lDIy77Z3EB_CU59nXsx9qUrDAfx6VcRHcCpn1lMLTXDr8xANlrvCvKTs9_Fgv37c4iEm9zc1dcruOiYNM7fPqDKgee_TBuK4Lckrt0X2E59gTdPs66Fp36Rx/s1600/goku.jpg" alt="slider image transparant" /></a></li>
<li><a href="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMGu0LwqqU3VDM260lfixsWMbofmPNheIw6VV_PIR6q6fBiIAHhGZKSbLDtwgoDACbESpCSXx0VyfoGqqEdUI9iibzamiScDHB0rHV2xmDTTvngiOOpS3UV8fbQdjDqSFS2W2eBFXNJqx6/s1600/fairly_tail.jpg" alt="slider image transparant" /></a></li>
<li><a href="6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJjq3LGhuIYv3VJFZVq0kRqdR4c6_enEEnDbddCRgrfbkVUz7L_0qO8XYZP64jwK-zFnUjQwOMXRWG-DSmRoTw3NLcMog-pKdy33pEH9nISCR7nqRozvxqVBbnYgoTXNgVz-XfpM8AP9n/s1600/Death_Note_Ryuk_w.jpg" alt="slider image transparant" /></a></li>
</ul>
<div class="text">
     <span><a href="#" title="Uzumaki Naruto"> 
     <strong> Uzumaki Naruto </strong>
         </a> seorang <strong> Shinobi </strong> atau <strong> Ninja </strong></span>
       
     <span><a href="#" title="Monkey D'Luffy">
     <strong>Monkey D'Luffy </strong></a> seorang <strong> Kapten </strong> dari <strong> Bajak Laut</strong></span>
     
     <span><a href="#" title="Kurosaki Ichigo">
     <strong> Kurosaki Ichigo </strong></a> seorang <strong> Shinigami </strong> atau <strong> Dewa Kematian </strong></span>

<span><a href="#" title="Son Goku">
     <strong> Son Goku </strong></a> seorang <strong> Manusia </strong> dengan <strong> Kekuatan Seiya </strong></span>
     
     <span><a href="#" title="Lucy Heartfilia">
     <strong> Lucy Heartfilia </strong></a> seorang <strong> Penyihir </strong> yang <strong> Mencari Naga </strong></span>
     
     <span><a href="#" title="Light Yagami">
     <strong> Light Yagami </strong></a> seorang <strong> Siswa </strong> yang <strong> Jenius </strong></span>
     
    </div>
<div class="description">
       <h3>
        <span class="term-one">
         <a href="#" title="Uzumaki Naruto">
          <strong> Uzumaki Naruto </strong>
         </a> seorang <strong> Shinobi </strong> atau <strong> Ninja </strong>
        </span>
       </h3>
</div>
</div>
</div>
</div>

.carousel .holder {
position: relative;
}

.carousel .right {
position: absolute;
top: 0;
left: -40px;
cursor: pointer;
height: 100%;
bottom: 0;
width: 150px;
background: -moz-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(28,139,183,1)), color-stop(32%, rgba(28,139,183,1)), color-stop(100%, rgba(28,139,183,0)));
background: -webkit-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -o-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -ms-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: linear-gradient(to right, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
z-index: 99;
}

.carousel .left {
position: absolute;
top: 0;
cursor: pointer;
right: -40px;
height: 100%;
bottom: 0;
width: 150px;
background: -moz-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(28,139,183,0)), color-stop(68%, rgba(28,139,183,1)), color-stop(100%, rgba(28,139,183,1)));
background: -webkit-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -o-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -ms-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: linear-gradient(to right, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
z-index: 99;
}

.boutique img {
margin: 0;
padding: 5px;
border-radius: 3px;
background-color: #ededed;
}

.carousel .remove {
display: none !important;
}

.carousel .frame3 img {
margin: 0 !important;
box-shadow: 0 1px 13px rgba(0,0,0,.47);
}

.boutique {
margin: 0;
padding: 0;
position: relative;
z-index: 1
}

.boutique li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 1;
display: none;
border-width: 0
}

.boutique img {
border: 0;
vertical-align: bottom
}

.boutique a, .boutique a:hover {
cursor: default;
text-decoration: none;
outline: none
}

.boutique img, .boutique li, .boutique a {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
cursor: pointer;
}

.carousel .holder {
width: 490px;
margin: 10px 50px 0 0;
float: right;
}
</style>