MyBB Türkçe Destek Forumu

Tam Versiyon: MyBB Temalarınız İçin Dinamik Slider
Şu anda arşiv modunu görüntülemektesiniz. Tam versiyonu görüntülemek için buraya tıklayınız.
MyBB Temalarınız İçin Dinamik Slider: Resimlerin üzerine gelin açıklamalar büyür. Ne kadar açıklama yazsanız da bozulmaz. Açıklamanızın bir kısmı gözükür sadece.

Kod:
Canlı demo adresi: https://codepen.io/r34lity/pen/LkJoGW

Nasıl Yapılır ? Anlatalım.
  1. Temanızın index şablonunu açıp aşağıdaki kodu bulun.
    Kod:
    {$header}

  2. Hemen altına bu kodu ekleyin. Ve gerekli kısımları kendinize göre düzenleyin.
    Kod:
    <style>
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500);

    body {margin: 0px;}

    #slide {
      position: relative;
      margin: 1px 0px 20px 0px;
      float: left;
    }

    #slide ul {
      padding: 0px;
      margin: 0px;
      list-style-type: none;
    }

    #slide ul li {
        display: inline-block;
        float: left;
        width: calc( 25% - 2px );
        height: 150px;
        overflow: hidden;
        cursor: pointer;
        border-left: 1px solid #fff;
    }

    #slide ul li:nth-child(1) {
    border-left: 0px solid;
    }

    #slide ul li img {
      width: 100%;
      height: 150px;
      float: left;
    }

    #slide ul li .aciklama {
      color: #fff;
      line-height: 21px;
      text-shadow: 0px 2px 1px black;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      font-family: Ubuntu;
      margin: 90px 0px;
      height: 30px;
      width: calc( 25% - 42px );
      padding: 15px 20px;
      position: absolute;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
      transition: all 250ms;
    }

    #slide ul li:hover .aciklama {
      margin: 70px 0px;
      height: 50px;
    }
    </style>


    <div id="slide">
      <ul>
        <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
          <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
             <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
                <li><a href="#"><img src="https://www.mobilofon.com/blog/wp-content/uploads/2016/04/Samsung-Galaxy-S7-Edge-Fiyat%C4%B1-200-D%C3%BC%C5%9Ft%C3%BC.jpg"><div class="aciklama">Son Döneme Damgasını Vuran 5 İlginç Teknolojik Ürün! Fazla kelimelerde böyle oluyor işte deneme için uzun yazmam lazım gördüğün gibi</div></li>
      </ul>
    </div>

Kolay gelsin.