Μη Συνδεδεμενος Παρακαλώ συνδεθείτε ή εγγραφείτε

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω  Μήνυμα [Σελίδα 1 από 1]

#1
 Admin

avatar
Admin
[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]


Κώδικας:
<div id="portfolio">
   <ul class="portfolio-grid">
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/1abc9c/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/2ecc71/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/3498db/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/9b59b6/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/16a085/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/27ae60/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/2980b9/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/8e44ad/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/f1c40f/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/e67e22/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/e74c3c/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/c0392b/FFFFFF" alt="img01"/>
                  </a>
               </li>
            </ul>

</div>



CSS:


Κώδικας:
body {
   height: 100%;
   background-color: #f2f2f2;
}

.portfolio-grid {
   list-style: none;
   padding: 0;
   margin: 0 auto;
   text-align: center;
   width: 100%;
}

.portfolio-grid li {
   display: inline-block;
   margin: 5px 5px 5px 5px;
   vertical-align: top;
    width:212px;
}

.portfolio-grid li > a,
.portfolio-grid li > a img {
    width: 100%;
   border: none;
   outline: none;
   display: block;
   position: relative;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-grid li > a img:hover {
    border-radius: 50%;
    z-index: 9999;
}


/******************************************
 Animate.CSS By Dan Eden
******************************************/

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
   -webkit-backface-visibility: visible !important;
   -webkit-animation-name: flipInX;
   -moz-backface-visibility: visible !important;
   -moz-animation-name: flipInX;
   -o-backface-visibility: visible !important;
   -o-animation-name: flipInX;
   backface-visibility: visible !important;

http://www.greekport.gr

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή  Μήνυμα [Σελίδα 1 από 1]


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης

Τρόποι Κοινοποίησης:
URL:
BBCode:
HTML: