0

Good day folks,

I'm currently creating an effect wherein I want to extend a div over the whole page when
the I hover it. Here's my code.

<!DOCTYPE html>
<html>
<head>
<style> 
#one
{
float:left;
width:300px;
height:100px;
background:black;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

#two
{
float:left;
width:300px;
height:100px;
background:gray;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

#one:hover
{
width:600px;
}

#two:hover
{
width:600px;
}

#wrapper {
    width: 600px;
    border: 1px solid black;
}

</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div id="wrapper">
<div id = "one"></div>
<div id = "two"></div>
</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Just imagine that the original width of the div is equal to half the size of the page.

Then, when I hover over it I want it to extend so the width would be the same size as the page.

**Sorry, I'm new to CSS so please don't mind the flaws in my code.

4
Contributors
3
Replies
32
Views
3 Years
Discussion Span
Last Post by designershiv
0

No need to you jquery, this can be done by css3 transition look at the code below,

div
{
width:100px;
height:100px;
background:red;
transition-property: width;
transition-duration: 2s;
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
}
div:hover
{
width:300px;
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.