Εντυπωσιακό CSS3 Image Circle Hover Effect για Blogger
Σε αυτό το σύντομο tutorial θα σας παρουσιάσουμε τον τρόπο να προσθέτετε κυκλικές εικόνες που να συνοδεύονται από ένα nice hover effect. Είναι ένας απλός τρόπος, όπως θα δείτε και στο μικρό μας βοήθημα που ακολουθεί για να κάνετε το blog σας ελκυστικό σε εμφανισιακό επίπεδο. Μπορείτε να χρησιμοποιήσετε αυτή την κυκλική εικόνα σαν link στην σελίδα σας ή στο post, όπως στην σελίδα επικοινωνίας, στην σελίδα ποιοι είμαστε και άλλες υποσελίδες του δικτυακού σας ιστοτόπου. Για το tutorial μας χρησιμοποιείται CSS και HTML και όπως θα διαπιστώσετε η κατασκευή ιστοσελίδας μπορεί να είναι μια πολύ ενδιαφέρουσα υπόθεση.
Ακολουθεί το tutorial μας
1. Κάντε Log in στο blogger account και δώστε Click drop down όπως στην εικόνα που ακολουθεί.
2. Τώρα επιλέξτε "Template" όπως στην εικόνα που ακολουθεί.
3. Τώρα μπορείτε live στο blog, κάντε κλικ στο EDIT HTML Button 4. Τώρα κάντε κλικ στο Proceed button. 5.Βρείτε τον κώδικα αυτό χρησιμοποιώντας Ctrl+F ]]></b:skin> 6. Κάντε Paste τον ακόλουθο κώδικα πριν τον κώδικα ]]></b:skin> /* Bloggertrix
*/
.Btrix-item { width: 150px; height: 150px; border-radius: 50%; position: relative; cursor: default;} .Btrix-info-wrap, .Btrix-info{ position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px; height: 150px; border-radius: 50%;} .Btrix-info-wrap { background: #07CFE0 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); } .Btrix-info > div { display: block;position: absolute;width: 150px;height: 150px; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/ }
.Btrix-info .Btrix-info-front { -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .Btrix-info .Btrix-info-back { opacity: 0;background: #07CFE0;pointer-events: none; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 0.4s ease-in-out 0.2s; -moz-transition: all 0.4s ease-in-out 0.2s; -o-transition: all 0.4s ease-in-out 0.2s; -ms-transition: all 0.4s ease-in-out 0.2s; transition: all 0.4s ease-in-out 0.2s; } .Btrix-img-1 { background-image: url(http://2.bp.blogspot.com/-4XCvJshy9x8/UIDjlYZiXDI/AAAAAAAAFQY/ttkRAS1f6g/s1600/bloggertrix-image+1.jpg);} .Btrix-img-2 { background-image: url(http://2.bp.blogspot.com/-Jb6h8JyvgY0/UIDkIf-Qz6I/AAAAAAAAFQg/mkhENaD86c/s1600/bloggertrix-image+2.jpg);} .Btrix-img-3 { background-image: url(http://3.bp.blogspot.com/Ll04NZIOfmk/UIDkJV5vrtI/AAAAAAAAFQo/fYqC8FW7g7U/s1600/bloggertrix-image+3.jpg);} .Btrix-info h3 { color: #fff; text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .Btrix-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: -60px 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .Btrix-info p a {
display: block;color: #e7615e;font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .Btrix-info p a:hover { color: #fff; } .Btrix-item:hover .Btrix-info-front { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; } .Btrix-item:hover .Btrix-info-back { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; pointer-events: auto;} .Btrix-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%;} .Btrix-grid:after, .Btrix-item:before { content: ''; display: table;} .Btrix-grid:after { clear: both;} .Btrix-grid li { width: 150px; height: 150px; display: inline-block; margin: 4px; }
* Μπορείτε να αλλάξετε την εικόνα που χρησιμοποιείται στο παράδειγμα μας που χρησιμοποιεί μια εικόνα με διαστάσεις 180x180 pixel 7. Πηγαίντε στο blogger και κάντε κλικ στο drop-down όπως στο 1ο βήμα και επιλέξτε Layout 8. Κάντε κλικ στο Add Gadget και επιλέξτε 'HTML/Javascript" 9. Κάντε paste τον ακόλουθο κώδικα. <section> <ul> <li> <div> <div> <div> <div></div> <div> <h3> Fashion</h3> By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br /> </div></div></div></div></li> <li> <div> <div> <div> <div></div> <div> <h3> Nature</h3> By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br /> </div></div></div></div></li> <li> <div> <div> <div> <div></div> <div> <h3> Car</h3> By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br /> </div></div></div></div></li></ul></section>
*Μπορείτε να αλλάξετε το header αναλόγως της εικόνας ή του image URL
10. Κάντε save στο template. Τελειώσατε αυτό είναι όλο.