MyBB Depo Forum

Orjinalini görmek için tıklayınız: MyBB Temalarınız İçin Dinamik Slider
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Sayfalar: 1 2
Öncelikle demo verelim;
Kod:
https://codepen.io/r34lity/pen/LkJoGW
Resimlerin üstüne gelin açıklamalar büyür.

Sorunsuzdur. Ne kadar açıklama yazsanız da bozulmaz. Açıklamanızın bir kısmı gözükür sadece.
Kuruluma geçmek gerekirse;

Temanızın index şablonlarını açıp
Kod:
{$header}
Kodunun hemen altına bu kodu ekleyin;

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>
Ve gerekli kısımları düzenleyin.
Eline sağlık başarılı çalışma olmuş.
Gerçekten başarılı , eline sağlık.
Önemli değil
Çok başarılı olmuş hocam birde bunu normal wp sitelerinde sağ sidebarda alt alta kullanabılır mıyız ? kullanabılırsek alt alta nasıl yapabılırız ?
(05-08-2016, Saat:13:58)EsqiLerdenBeri Adlı Kullanıcıdan Alıntı: [ -> ]Çok başarılı olmuş hocam birde bunu normal wp sitelerinde sağ sidebarda alt alta kullanabılır mıyız ? kullanabılırsek alt alta nasıl yapabılırız ?

@EsqiLerdenBeri

CSS'yi bunla değişip HTML kodunu bire bir ekle olur.
Kod:
@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: block;
   width: calc( 25% - 2px );
   height: 150px;
   overflow: hidden;
   cursor: pointer;
   border: 1px solid #fff;
}

#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;
}
Saolasın kardeşim ellerine sağlık
ornek varmı? nasıl gorundugunu merak ettim
Sayfalar: 1 2