The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Fade out picture/scrollbox

2 posters

Go down

Fade out picture/scrollbox Empty Fade out picture/scrollbox

Post by IdaTR 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
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Fade out picture/scrollbox Empty Re: Fade out picture/scrollbox

Post by Mike 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
Mike
Hyperactive

Male Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado

Back to top Go down

Fade out picture/scrollbox Empty Re: Fade out picture/scrollbox

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

But it wont work in a scrollbox?
IdaTR
IdaTR
Forumember

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

http://www.vielamort.net

Back to top Go down

Back to top

- Similar topics

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