(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;
}