Fade out picture/scrollbox
2 posters
Page 1 of 1
Fade out picture/scrollbox
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:
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>
Re: Fade out picture/scrollbox
Here's an example code. Use it as you like:
Here's a link to show what I did: http://jsfiddle.net/VnMFP/23/
- 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
- Posts : 4255
Reputation : 471
Language : English, HTML, CSS
Location : Loveland, Colorado
Similar topics
» fade out
» fade edges
» CSS for scrollbar fade-out in Chrome?
» jquery hover fade in/out
» Fade and light images
» fade edges
» CSS for scrollbar fade-out in Chrome?
» jquery hover fade in/out
» Fade and light images
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum