Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




4 Ομορφο εφέ με κείμενο στην εικόνα



ΦΙΛΟΙ bloggers ΓΕΙΑ ΣΑΣ !!!ΣΗΜΕΡΑ ΣΑΣ ΚΑΛΩΣ ΟΡΙΖΩ ΜΕ ΜΗΝΥΜΑ ΜΕΣΑ ΑΠΟ ΤΗΝ ΑΝΑΡΤΗΣΗ ...ΠΕΡΝΩΝΤΑΣ ΤΟ ΠΟΝΤΙΚΙ ΠΑΝΩ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ , ΕΧΕΤΕ ΑΥΤΟ ΤΟ ΥΠΕΡΟΧΟ ΕΦΕ...ΤΟ ΚΕΙΜΕΝΟ ΠΟΥ ΜΠΟΡΕΙΤΕ ΝΑ ΒΑΛΕΤΕ, ΜΠΟΡΕΙ ΝΑ ΕΙΝΑΙ ΑΡΚΕΤΑ ΜΕΓΑΛΟ...ΤΟ ΚΩΔΙΚΑ ΤΟΝ ΔΙΝΩ ΠΑΡΑΚΑΤΩ...ΠΗΓΗ: thanks to: www.dynamicdrive.com/
Ο ΚΩΔΙΚΑΣ:



<style>
/*================ Sliding Description Panel For Images By HelperBlogger ================*/

.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}

.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/*================ Sliding Description Panel For Images By HelperBlogger ================*/

</style>

<center><div class="imagepluscontainer" style="width:243px;">
<img src=" ΕΔΩ Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΟΝΑΣ">
<div class="desc downslide">
 ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ ΠΟΥ ΘΕΛΕΤΕ ΝΑ ΦΑΝΕΙ
</div>
</div></center>


***ΜΠΟΡΕΙΤΕ ΝΑ ΒΑΛΕΤΕ ΟΛΟ ΤΟ ΚΩΔΙΚΑ ΣΕ ΕΝΑ GADGET ....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

4 σχόλια:

beautymark.gr είπε...

Το έβαλα σαν gadget στην αρχική σελίδα πολύ όμορφο.Ένα μεγάλο Μπράβο.....

9o Ολοήμερο Δημοτικό Σχολείο Αμαρουσίου είπε...

Καλησπέρα και συγχαρητήρια
Το πρώτο μου ποστ εδώ
Πως βάζω την διεύθυνση της εικόνασ?

Φιλικά
Νίκος

pandelees karagiann είπε...

Νικο, η διευθυνση μιας εικονας ειναι η διευθυνση πανω ψηλα στο περιηγητης σου....τη βαζεις αναμεσα στα εισαγωγικα "....διευθυνση..."
Για να μαθεις πως να παρεις τη διευθυνση μιας εικονας, κοιτα εδω http://www.dr-blogger.com/2011/01/url.html

ΤΗΛΕΓΡΑΦΟΣ είπε...

ΚΑΛΗΣΠΕΡΑ...ΠΟΛΗ ΟΜΟΡΦΟ ΕΦΕ...ΑΛΛΑ ΣΕ ΜΕΝΑ ΤΗΝ ΜΠΑΡΑ ΤΗΝ ΒΓΑΖΕΙ ΠΙΣΩ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ...ΠΩΣ ΤΟ ΔΙΟΡΘΩΝΩ ΠΑΡΑΚΑΛΩ ???