The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Fade out picture/scrollbox

View previous topic View next topic Go down

Fade out picture/scrollbox

Post by IdaTR on January 27th 2014, 7:14 pm

Hallow!! Currently i'm working on some html profiles for another site. However, I simply can't get it to work with a fade out effect on pictures. 

I how ever the fade out should work on a scrollbox with a background image. When the mouse comes over the scrollbox should enlighten, and be more clearly to see. 

Dkn if its possible, or if anybody has tried it before?

I'm sorry if you dont understand my request, and I'll be glad to re-explain it further on. 

the html code:
Code:
<center><div style="background-image:url(http://th03.deviantart.net/fs70/PRE/i/2011/281/3/a/ekd_vintage_pattern_4___1817_by_eveyd-d4c75gg.jpg); background-repeat:repeat; padding:5px;width:700px;height:2000px;border:1px solid black;"><style type="text/css">
div.background
  {
  width:100%;
  height:1975px;
  background:url(klematis.jpg) repeat;
  margin-top:-10}
div.transbox
  {
  width:650px;
  height:100%;
  margin:25px 10px -10px 10px;
  background-color:#893737;
  border:1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.96;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#FFFFFFF;
  }
.images
{
    position: relative;
}
.images img
{
    display: none;
    position: absolute;
}
</style>
   <div class="background">
      <div class="transbox">
         <div style="letter-spacing:1;"><p><img style="position:absolute;top:40;left:431"src="http://i40.tinypic.com/14wdg9i.png">
         <img style="position:absolute; TOP:360px; LEFT:456px"src="http://fc03.deviantart.net/fs71/i/2013/190/f/5/lion_sketch_tattoo_by_quidames-d6cop4l.png" width="70"><img style="position:absolute; top:360px; right:456px;" src="http://i40.tinypic.com/2e6atsh.png" width="70"><br><r><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<table style="border:0px solid #000;" line-height="-5px" width="500px"><tr>
<td style="border-bottom:#FF7190 1px solid;" width="100px"><span style="font-family:Kalinga;font-size:11px;color:#FEFF71; line-height:-5px;"><center><strong>NAVN<strong></center></span></td>
<td style="border-bottom:#FF7190 1px solid;" width="100px"><span style="font-family:Kalinga;font-size:11px;color:#FEFF71; line-height:-5px;"><center><strong>ALDER</strong></center></span></td>
<td style="border-bottom:#FF7190 1px solid;" width="100px"><span style="font-family:Kalinga;font-size:11px;color:#FEFF71; line-height:-5px;"><center><strong>KOLLEGIE</strong></center></span></td>
<td style="border-bottom:#FF7190 1px solid;" width="100px"><span style="font-family:Kalinga;font-size:11px;color:#FEFF71; line-height:-5px;"><center><strong>BLOD</strong></center></span></td></tr>
<tr>

<td style="background:url(http://i39.tinypic.com/6ynl06.png);" width="100px"><span style="font-family:Kokila;font-size:14px;color:#6B1717;"><center>MASJA</center></span></td>
<td style="background:#6B1717;" width="100px"><span style="font-family:Kokila;font-size:14px;color:#E7FF57;"><center>14</center></span></td>
<td style="background:url(http://i39.tinypic.com/6ynl06.png); background-position:right;" width="100px"><span style="font-family:Kokila;font-size:14px;color:#6B1717;"><center>GRYFFINDOR</center></span></td>
<td style="background:#6B1717;" width="100px"><span style="font-family:Kokila;font-size:14px;color:#E7FF57;"><center>FULDBLOD</center></span></td></tr></table>

<br><hr style="border-bottom:1px solid #000; border-top:0px solid #000; border-left:0px solid #000;"><br><br><br>

<table style="position:absolute; top:508px; right:465px;border=0" line-height="-5px" cellspacing="10px" width="600px"><tr><td width="200px"><center><img src="http://i42.tinypic.com/2gt0nyw.png"></center></td>
<td style="position:float-right;"><div style="background-image:url(http://i39.tinypic.com/htyziu.jpg);background-posion:fixed;padding:5px;width:380px;height:120.986;border:1px solid #0A2A1B; webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
   <div style="height:117.986px;border:0px solid #9e9e9e; padding:2px ;font:11px/26px verdana, Georgia, Garamond, Serif;overflow:auto;letter-spacing:0.3px; line-height:1.5;">
       <span style="color: #000;">INDSÆT PERSONLIGHEDS BESKRIVELSE HER.<BR><BR>DETTE ER EN SCROLLBOKS, SÅ DU KAN SKRIVE SÅ MEGET DU VIL.</span>
   </div>
</div></td></tr></table><br><br><br><br><br><br>
<hr style="border-bottom:1px solid #000; border-top:0px solid #000; border-left:0px solid #000;"<br><br><br><br>
<table style="position:absolute; top:822px; right:495px;"cellspacing="5px"><tr><td colspan="3"></td><img style="position:absolute; top:700px; right:545px;" src="http://i43.tinypic.com/2s76krb.png"></tr><tr>
<td><div style="background-image:url(http://i40.tinypic.com/2qatlbs.jpg);background-position:center;padding:5px;width:150;height:150;border:1px solid #0A2A1B; webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;""><span style="font-family: Berylium;">
<span style="font-size: 13px; color:#2B5A42;"><strong>All Around<hr style="border: 1px solid;"></strong></span></span>
<div style="height:150px;border:0px solid #9e9e9e; padding:2px ;font:11px/26px Verdana, Georgia, Garamond, Serif;overflow:auto;letter-spacing:1px; line-height:1.5;"><span style="color:#000;">Indsæt tekst her omkring jobbet</span></div></td>

<td><div style="background-image:url(http://i41.tinypic.com/2v2fu3c.jpg);padding:5px;width:150;height:150;border:1px solid #0A2A1B; webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;""><span style="font-family: Berylium;">
<span style="font-size: 13px; color:#2B5A42;"><strong>Qudditch<hr style="border: 1px solid;"></strong></span></span>
<div style="height:150px;border:0px solid #9e9e9e; padding:2px ;font:11px/26px Verdana, Georgia, Garamond, Serif;overflow:auto;letter-spacing:1px; line-height:1.5;"><span style="color:#000;">Indsæt tekst her omkring jobbet</span></div></td>

<td><div style="background-image:url(http://i43.tinypic.com/2dwhwyx.jpg);background-position:center;;padding:5px;width:150;height:150;border:1px solid #0A2A1B; webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;""><span style="font-family: Berylium;">
<span style="font-size: 13px; color:#2B5A42;"><strong>UL Skribent<hr style="border: 1px solid;"></strong></span></span>
<div style="height:150px;border:0px solid #9e9e9e; padding:2px ;font:11px/26px Verdana, Georgia, Garamond, Serif;overflow:auto;letter-spacing:1px; line-height:1.5;"><span style="color:#000;">Indsæt tekst her omkring jobbet</span></div></td></tr></table><br><br><br><br><br><br><br><br><br><br><br><b><br><br><br>
<hr style="border-bottom:1px solid #000; border-top:0px solid #000; border-left:0px solid #000;">

<table style="position:absolute; top:1040px; right:465px;border=0" line-height="-5px" cellspacing="10px" width="600px"><tr><td width="300px"><div style="background-image:url(http://i43.tinypic.com/2m63e5w.jpg);background-position:center;padding:5px;width:285;height:443;border:1px solid #000; webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;""><span style="font-family: Berylium;">
<span style="font-size: 13px; color:#2B5A42;"><strong>INDSÆT KÆRESTENS NAVN<hr style="border: 1px solid;"></strong></span></span>
<div style="height:446px;border:0px solid #9e9e9e; padding:2px ;font:11px/26px Verdana, Georgia, Garamond, Serif;overflow:auto;letter-spacing:1px; line-height:1.5;"><span style="color:#000;">Indsæt tekst her</span></div></td><td><img src="http://i41.tinypic.com/ogzx4z.jpg"></td></tr></table><br>

<table style="position:absolute; top:1540px; right:465px;border=0" line-height="-5px" cellspacing="10px" width="600px"><tr><td width="300px"></td></tr></table>
</div>
      </div>
   </div><br /><br />
</div></center>

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Re: Fade out picture/scrollbox

Post by Mike on January 28th 2014, 10:06 pm

Here's an example code. Use it as you like:

Code:
<img src="http://farm1.staticflickr.com/44/154355830_e37cd1bbf2.jpg" class="rollovertest">


Code:
.rollovertest{
opacity: 0.5 !important;
-webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
.rollovertest:hover {
-webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
opacity: 1 !important;
}

Here's a link to show what I did: http://jsfiddle.net/VnMFP/23/

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Re: Fade out picture/scrollbox

Post by IdaTR on January 30th 2014, 9:27 am

But it wont work in a scrollbox?

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum