Αλμπουμ φωτογραφιων με Hover Effect

  
Αυτο το Gadget απευθηνεται πιο πολλη σε φωτογραφικα Blogs για τον λογο οτι ειναι ενα φωτογραφικο αλμπουμ. Βεβαια μπορουν να το χρησιμοποιησουν κι αλλα Blogs με το να βαλουν οτι εικονες θελουνε.Το ξεχωριστο σε αυτο το αλμπουμ ειναι οτι εχει αυτο το πολλη ωραιο Hover Effect. Οπως ξερουμε το Hover ειναι οταν βαζουμε τον κερσορα του ποντικιου  πανω σε μια εικονα ή λινκ χωρις να κανουμε κλικ.(Το Demo ειναι στο τελος της αναρτησης).




1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

4) Παμε τωρα να ψαξουμε τον παρακατω κωδικα(Ctl+F):

</head>

5) Και επικολουμε ακριβως απο πανω τον παρακατω κωδικα:

<style type='text/css'>
.img{
 -webkit-transform:scale(0.6);
 -moz-transform:scale(0.6);
 -o-transform:scale(0.6);
 float:left;
 margin-left:-20px;
 margin-right:-50px;
 margin-top:14px;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 }
.img img{
  padding:10px;
  border:1px solid #fff;
}
.img:hover{
 -webkit-transform:scale(0.8);
 -webkit-box-shadow:0px 0px 30px #ccc;
 -moz-transform:scale(0.8);
 -moz-box-shadow:0px 0px 30px #ccc;
 -o-transform:scale(0.8);
 -o-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
 width: 100%;
 background-color: rgb(0, 0, 0);
 position: absolute;
 height: 100%;
 opacity:0.6;
 cursor:pointer;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration:0.5s;
}
#img-1:hover .mask{
 height:0%;
}
#img-2:hover .mask{
 height:0%;
 margin-top:130px;
}
#img-4:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
}
#img-3 #mask-1 {
 width:50%;
}
#img-3 #mask-2{
 width:50%;
 margin-left:211px;
}
#img-3:hover #mask-1{
 width:0%;
}
#img-3:hover #mask-2{
 margin-left:430px;
 width:0%;
}
#img-5:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateX(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(-360deg);
}
#img-6:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateZ(750deg);
 -moz-transform: rotateZ(750deg);
 -o-transform: rotat(750deg);
}
</style>
<style type='text/css'>
#container{
 width:100%;
 min-height:800px;
 background-color:#000;
}
a{
color: rgb(0, 114, 191); text-decoration: none;
}
.heading{
 font-size:24px;
 color:#dfdfdf;
 text-align:center;
 padding-top:20px;
}
}
.clearfix{
 clear:both;
 float:none;
}
</style>

-Αποθηκευση Προτυπου

6) Και τωρα παμε να φτιαξουμε και γενικα να εφαρμοσουμε το αλμπουμ μας.

- Πηγαινουμε στα Στοιχεια σελιδας-Προσθηκη Gadget-Javascript/HTML και προσθετουμε τον παρακατω κωδικα:

<div id='container'>
   <div id='image-container'>
    <div class='img' id='img-1'>
     <div class='mask'></div>
     <img src='http://www.architectureweek.com/2008/1210/images/people_and_places_408.300.jpg' />
    </div>
    <div class='img' id='img-2'>
     <div class='mask'></div>
     <img src='http://www.architectureweek.com/2008/0206/images/people_and_places_367.300.jpg' />
    </div>
    <div class='img' id='img-3'>
     <div class='mask' id='mask-1'></div>
     <div class='mask' id='mask-2'></div>
     <img src='http://www.mywonderfulplaces.com/wp-content/uploads/13_4_orig.jpg' />
    </div>
    <div class='img' id='img-4'>
     <div class='mask'></div>
     <img src='http://www.architectureweek.com/2008/1029/images/people_and_places_403.300.jpg' />
    </div>
    <div class='clearfix'></div>
   </div>
  <div class='clearfix'></div>
   <br/></div>

Σημιωσεις

Απλα αλλαζετε τα παραπανω κοκκινα γραμματα (Url) με τα δικα σας Url των εικονων σας.

- Και τελιωσετε πολλη απλα και ευκολα!

- Για το Demo ειναι το παρακατω βιντεο:

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.

  Ευχαριστω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: paulsantosh