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ş */