Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

5'li İçerik Manşeti (Responsive) - HTML // CSS

 11 Mesajlar 3.047 Okunma
lstbozum
tr.link

#1
enes66 enes66 WM Aracı Kullanıcı
  • Üyelik 02.03.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Grafiker, Web
  • Konum Yozgat
  • Ad Soyad E** Y**
  • Mesajlar 12
  • Beğeniler 9 / 4
  • Ticaret 0, (%0)
Herkese iyi forumlar, hazırlamakta olduğum haber scripti için yazdığım manşet tasarımını paylaşıyorum tamamen responsive olarak tasarladım. Herkese iyi forumlar...

Masaüstü versiyon:



Mobil Versiyon:



Mobil ( max-width 320px) Versiyon:



HTML:


CSS:
/* 1. feeba-manset */
#feeba-manset div:nth-child(1){
width: 50%;
height: 350px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(1) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(1) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(1) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(1) .baslik h2 {
position: absolute;
bottom:50px;
font-family: "DIN Pro Medium";
}
#feeba-manset div:nth-child(1) .baslik p {
position: absolute;
bottom:14px;
font-family: "DIN Pro Light";
font-size: 14px;
}
/* 2. feeba-manset */
#feeba-manset div:nth-child(2){
margin-left: 8px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(2) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(2) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(2) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(2) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "DIN Pro Medium";
font-size:17px;
}
#feeba-manset div:nth-child(2) .baslik p {
position: absolute;
bottom:-10px;
font-family: "DIN Pro Light";
font-size: 12px;
}
/* 3. feeba-manset */
#feeba-manset div:nth-child(3){
margin-left: 9px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(3) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(3) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(3) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(3) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "DIN Pro Medium";
font-size:17px;
}
#feeba-manset div:nth-child(3) .baslik p {
position: absolute;
bottom:-10px;
font-family: "DIN Pro Light";
font-size: 12px;
}
/* 4. feeba-manset */
#feeba-manset div:nth-child(4){
margin-top: 8px;
margin-left: 8px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(4) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(4) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(4) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(4) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "DIN Pro Medium";
font-size:17px;
}
#feeba-manset div:nth-child(4) .baslik p {
position: absolute;
bottom:-10px;
font-family: "DIN Pro Light";
font-size: 12px;
}
/* 5. feeba-manset */
#feeba-manset div:nth-child(5){
margin-top: 8px;
margin-left: 8px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(5) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(5) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(5) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(5) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "DIN Pro Medium";
font-size:17px;
}
#feeba-manset div:nth-child(5) .baslik p {
position: absolute;
bottom:-10px;
font-family: "DIN Pro Light";
font-size: 12px;
}

@media only screen and (max-width: 960px) {
#feeba-manset div:nth-child(1){
margin-left: 4px;
width: 100%;
height: 270px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(2){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(3){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(4){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(5){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
}

@media only screen and (max-width: 320px) {
#feeba-manset div:nth-child(1){
margin-left: 4px;
width: 100%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(1) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "DIN Pro Medium";
font-size:17px;
}
#feeba-manset div:nth-child(1) .baslik p {
position: absolute;
bottom:-10px;
font-family: "DIN Pro Light";
font-size: 12px;
}
#feeba-manset div:nth-child(2){
margin-top: 4px;
margin-left: 4px;
width: 100%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(3){
margin-top: 4px;
margin-left: 4px;
width: 100%;
height: 150px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(4){
margin-top: 4px;
margin-left: 4px;
width: 100%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(5){
margin-top: 4px;
margin-left: 4px;
width: 100%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
}
/* feeba-manset bitiş */
cgrclk birfincanask Talha1751

kişi bu mesajı beğendi.

wmaraci
reklam

#2
omrumdely omrumdely Web Tasarım Kullanıcı
  • Üyelik 26.05.2012
  • Yaş/Cinsiyet 34 / E
  • Meslek Web Tasarım
  • Konum Kocaeli
  • Ad Soyad Ö** G**
  • Mesajlar 1468
  • Beğeniler 157 / 158
  • Ticaret 11, (%100)
İşime yarayacak paylaşımın için teşekkürler

LG-D855 cihazımdan Tapatalk kullanılarak gönderildi
enes66

kişi bu mesajı beğendi.

:)

#3
enes66 enes66 WM Aracı Kullanıcı
  • Üyelik 02.03.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Grafiker, Web
  • Konum Yozgat
  • Ad Soyad E** Y**
  • Mesajlar 12
  • Beğeniler 9 / 4
  • Ticaret 0, (%0)
Ben teşekkür ederim. önizlemeler koydum gönderiye. iyi forumlar
 

 

#4
Talha1751 Talha1751 WM Aracı Kullanıcı
  • Üyelik 24.06.2015
  • Yaş/Cinsiyet 29 / E
  • Meslek Web Tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad T** B**
  • Mesajlar 79
  • Beğeniler 22 / 22
  • Ticaret 0, (%0)
Emeğinize direkt konmamak için üzerinde biraz oynayıp siteme ekleyeceğim zaten bende de sorunlar bitmiyor neyse çok yazdım teşekkür ederim :D
enes66

kişi bu mesajı beğendi.

wmaraci
wmaraci

#5
enes66 enes66 WM Aracı Kullanıcı
  • Üyelik 02.03.2016
  • Yaş/Cinsiyet 31 / E
  • Meslek Grafiker, Web
  • Konum Yozgat
  • Ad Soyad E** Y**
  • Mesajlar 12
  • Beğeniler 9 / 4
  • Ticaret 0, (%0)
Kodu düzenlemek için izin almanıza gerek yok :) zaten bilgiyi birikimi paylaşmak için forumlara yazıyoruz :) istediğiniz şekilde düzenleyebilirsiniz. Responsive Manşet Slider da yaptım tabi ki swiper ı biraz editledim :D onu da yakında yüklerim :)
 

 

#6
Talha1751 Talha1751 WM Aracı Kullanıcı
  • Üyelik 24.06.2015
  • Yaş/Cinsiyet 29 / E
  • Meslek Web Tasarım
  • Konum İstanbul Avrupa
  • Ad Soyad T** B**
  • Mesajlar 79
  • Beğeniler 22 / 22
  • Ticaret 0, (%0)
Yok genel olarak çok beğendiğim bir kodu bir yerden alıyorsam onu tamamen değiştirerek alır montajlarım ki yapan kişinin tasarımıyla birebir olmasın ne bileyim öyle işte :D kolay gelsin
enes66

kişi bu mesajı beğendi.

#7
RedFoX RedFoX WM Aracı Kullanıcı
  • Üyelik 25.01.2016
  • Yaş/Cinsiyet 38 / E
  • Meslek Muhasebe
  • Konum Bolu
  • Ad Soyad L** İ**
  • Mesajlar 106
  • Beğeniler 29 / 35
  • Ticaret 0, (%0)
Konu işime yaradı teşekkür ederim. Wp ye uyarlayamayanlar için hazır kod olarak vereyim.

Ben resimi özel kod olarak kullanıyorum siz orayı öne çıkarılmış görsel olarak kullanıyorsanız alttaki kodla değiştirebilirsiniz.
linksiz

kişi bu mesajı beğendi.

mudurnugundem.com

#8
linksiz linksiz ögrenci Kullanıcı
  • Üyelik 12.07.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek ögrenci
  • Konum Ankara
  • Ad Soyad E** P**
  • Mesajlar 680
  • Beğeniler 80 / 81
  • Ticaret 7, (%100)
wordpress uyarlayanlar bi index.php kodunu verebilir mi ?
 

 

#9
linksiz linksiz ögrenci Kullanıcı
  • Üyelik 12.07.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek ögrenci
  • Konum Ankara
  • Ad Soyad E** P**
  • Mesajlar 680
  • Beğeniler 80 / 81
  • Ticaret 7, (%100)
RedFoX özel değilse style.css index.php dosyanızı paylaşırmısınız manteş bölümünü yapamadım:S
 

 

#10
RedFoX RedFoX WM Aracı Kullanıcı
  • Üyelik 25.01.2016
  • Yaş/Cinsiyet 38 / E
  • Meslek Muhasebe
  • Konum Bolu
  • Ad Soyad L** İ**
  • Mesajlar 106
  • Beğeniler 29 / 35
  • Ticaret 0, (%0)

linksiz adlı üyeden alıntı

RedFoX özel değilse style.css index.php dosyanızı paylaşırmısınız manteş bölümünü yapamadım:S


linksiz adlı üyeden alıntı

wordpress uyarlayanlar bi index.php kodunu verebilir mi ?


Wordpress için kendime göre düzenlediğimi senle paylaşayım.

Tema Css ekleyeceğin kod
.le-manset {
display: table;
padding-bottom : 10px;
}

#feeba-manset div:nth-child(1){
width: 50%;
height: 350px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(1) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(1) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(1) .baslik:hover {

background-position: 0 100%;
}

#feeba-manset div:nth-child(1) .baslik h2 {
position: absolute;
bottom:50px;
font-family: "Montserrat";
color: white;
font-size: 20px;
text-shadow: 3px 2px 1px #000;
}
#feeba-manset div:nth-child(1) .baslik p {
position: absolute;
bottom:14px;
font-family: "Montserrat";
font-size: 15px;
color: white;
}

/* 2. feeba-manset */
#feeba-manset div:nth-child(2){
margin-left: 8px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(2) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(2) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(2) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(2) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "Montserrat";
font-size:17px;
color: white;
text-shadow: 3px 2px 1px #000;
}
#feeba-manset div:nth-child(2) .baslik p {
position: absolute;
bottom:-4px;
font-family: "Montserrat";
font-size: 12px;
color: white;
}

/* 3. feeba-manset */
#feeba-manset div:nth-child(3){
margin-left: 9px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(3) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(3) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(3) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(3) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "Montserrat";
font-size:17px;
color: white;
text-shadow: 3px 2px 1px #000;
}
#feeba-manset div:nth-child(3) .baslik p {
position: absolute;
bottom:-4px;
font-family: "Montserrat";
font-size: 12px;
color: white;
}

/* 4. feeba-manset */
#feeba-manset div:nth-child(4){
margin-top: 8px;
margin-left: 8px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(4) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(4) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(4) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(4) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "Montserrat";
font-size:17px;
color: white;
text-shadow: 3px 2px 1px #000;
}
#feeba-manset div:nth-child(4) .baslik p {
position: absolute;
bottom:-4px;
font-family: "Montserrat";
font-size: 12px;
color: white;
}

/* 5. feeba-manset */
#feeba-manset div:nth-child(5){
margin-top: 8px;
margin-left: 8px;
width: 24%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(5) img{
width: 100%;
height: 100%;
}
#feeba-manset div:nth-child(5) .baslik{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 100%;
padding: 13px;
color: #FFF;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
background: rgba(255,255,255,0);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(64%, rgba(92,92,92,0)), color-stop(100%, rgba(0,0,0,0.99)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(92,92,92,0) 64%, rgba(0,0,0,0.99) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );
background-size: auto 200%;
background-position: 0 50%;
-webkit-transition: background-position 0.5s;
-moz-transition: background-position 0.5s;
-o-transition: background-position 0.5s;
transition: background-position 0.5s;
}

#feeba-manset div:nth-child(5) .baslik:hover {
background-position: 0 100%;
}

#feeba-manset div:nth-child(5) .baslik h2 {
position: absolute;
bottom:20px;
font-family: "Montserrat";
font-size:17px;
color: white;
text-shadow: 3px 2px 1px #000;
}
#feeba-manset div:nth-child(5) .baslik p {
position: absolute;
bottom:-4px;
font-family: "Montserrat";
font-size: 12px;
color: white;
}

@media only screen and (max-width: 960px) {
#feeba-manset div:nth-child(1){
margin-left: 4px;
width: 100%;
height: 270px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(2){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(3){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(4){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
#feeba-manset div:nth-child(5){
margin-top: 4px;
margin-left: 4px;
width: 48.7%;
height: 170px;
overflow:hidden;
float:left;
position: relative;
}
}


Sayfada göstermek istediğin Kod ( Özel Alan Resim )







Sayfada göstermek istediğin Kod ( Öne Çıkarılmış Resim )
 

 

mudurnugundem.com
Bu Kısmı Nasıl Düzeltebilirim ?
F12den Gördüğüm Kodları Nerede Bulabilirim ?
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al