Forum Moderators: open
- IE10
- Firefox 20.0.1
- Opera 12.1.5
- Safari 5.1.7
- Chrome 26.0.1410.64
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
color:#fff;
}
#container {
width:800px;
margin:auto;
}
#pub-link {
position-relative;
float:left;
width:182px;
height:22px;
margin:0 20px 20px 0;
}
#pub-link img {
position:absolute;
width:182px;
height:22px;
border:1px solid #fc9;
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
#pub-link img:hover {
width:800px;
height:99px;
border:5px solid #fc9;
}
</style>
</head>
<body>
<div id="container">
<a id="pub-link" href="http://www.pubcon.com/">
<img src="http://www.pubcon.com/banners/nola11.png" alt="pub con banner">
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p>
</div>
</body>
</html>
The CSS birdbrain provided will not smoothly increase the image as on your demo page.
onmouseover = "growIt(this,250,300,500,600,0)" onmouseout = "shrinkIt(this,250,300,500,600,0)"var object, direction, stepcount = 1, fraction = 40, growtime = 20, leftpos;
var smwidth, smheight, lgwidth, lgheight;
function growIt(ii,width1,height1,width2,height2,left)
{
object = ii;
direction = 1;
setValues(width1,height1,width2,height2,left);
}
function shrinkIt(ii,width1,height1,width2,height2,left)
{
direction = -1;
setValues(width1,height1,width2,height2,left);
}
function setValues(w1, h1, w2, h2, lf)
{
smwidth = w1;
smheight = h1;
lgwidth = w2;
lgheight = h2;
leftpos = lf;
redraw();
}
function redraw()
{
var width = Math.round(xy(smwidth,lgwidth));
var height = Math.round(xy(smheight,lgheight));
if(leftpos) object.style.left = (smwidth-width) + "px";
object.style.width = width + "px";
object.style.height = height + "px";
if(direction > 0 && stepcount < fraction)
{
stepcount++;
setTimeout('redraw()',growtime);
}
else if(direction < 0 && stepcount > 0)
{
stepcount--;
setTimeout('redraw()',growtime);
}
}
function xy(first,second)
{
return (second-first)*(stepcount/fraction) + first;
}
Hi there jarodsafehouse71,
The CSS transition does allow you to define the initial
and final dimenensions and also the time duration. ;)
