Neko

Felugró szöveg, ha a képre viszed az egeret

<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>

 

<div align="center">

<div class="imagecenter">

<img src="//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1280675881_72.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="//aranymeli.gportal.hu/gindex.php?pg=35799854">Képeffektek</a></div>

Súgó Még nincs hozzászólás.