Cikkajánló
Készítettem a napokban kettő darab projektdobozt, aztán gondoltam el is hozom egyszerre hamar a kettőt, nehogy baj legyen belőle később, mert az sem mindegy, hogy mikor mit frissítek… Egyébként
Ez egy leírás arról, hogyan tudsz a Coppermine Galéria fejlécébe ugyan úgy egyedi menüt tenni, mint pl. a weboldalad fejlécébe. Szóval nem a megszokott hagyományos két soros menü lesz
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Felugró szöveg, ha képre viszed az egeret

 

 

Felugró szöveg a linkelt képre
Vidd az egeret a kép fölé és olvasd el a felugró szövegben az adott információt a képről :) Több képeffekt itt található: Képeffektek

Kép kódja
 

<div class="imagecenter">
    <img src="/images/scripts/image-effects/001.png" />
<div class="desc upslide">
        <u>Felugró szöveg a linkelt képre</u><br />
        Vidd az egeret a kép fölé és olvasd el a felugró szövegben az adott információt a képről :) Több képeffekt itt található: <a href="http://aranymeli.gportal.hu/gindex.php?pg=35799854">Képeffektek</a>
    </div>
</div>

 

CSS kód
 

<style type="text/css">
.imagecenter{
       position: relative;
       width: 260px; /* doboz szélessége */
       height: 100%; /* doboz magassága */
       text-align: center; /* dobozban a szöveg elrendezése */}
.imagecenter img{
       position: relative;
       -moz-transition: all 0.5s ease;}
.imagecenter:hover img{ /* linkre a kép */
        padding: 0px;
        filter: alpha(opacity=80); /* kép halványítása */
        opacity: 0.8; /* kép halványítása */ }
.imagecenter div.desc{ /* felugró doboz */
       position: absolute;
       width: 90%;
       bottom: 0;
       padding: 10px; /* a doboz és a széle közötti táv */
       background: #49CDAC; /* doboz háttérszíne */
       opacity: 0; /* Set initial opacity to 0 */
       -moz-border-radius: 0 9px 0 9px; /* keret */
       -webkit-border-radius: 0 9px 0 9px; /* keret */
       border-radius: 0 9px 0 9px; /* keret */
       -moz-box-shadow: 0 0 6px #858585; /* doboz árnyéka */
       -webkit-box-shadow: 0 0 6px #858585; /* doboz árnyéka */
       box-shadow: 0 0 6px #858585; /* keret árnyéka */
       -moz-transition: all 0.5s ease 0.5s;
       -webkit-transition: all 0.5s ease 0.5s;}
.imagecenter div.desc a{ /* link színe */
    color: #F9D536;}
.imagecenter:hover div.desc{ /*a szöveg színe */
       color: #ffffff;
       opacity: 1;}
.imagecenter div.upslide{ /* a doboz felül */
       top:0;
       bottom:auto;
       padding-bottom:5px;
       -moz-border-radius: 0 9px 0 9px; /* keret */
       -webkit-border-radius: 0 9px 0 9px; /* keret */
       border-radius: 0 9px 0 9px; /* keret */}
.imagecenter:hover div.upslide{
       -moz-transform: translate(0, -100%);
       -webkit-transform: translate(0, -100%);}
</style>

lindadesign Hozzászólások
1 454 megtekintés

Hozzászólások