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.

Recommended Answers

http://jsfiddle.net/CvhkM/

This is what you're looking for ;)

Jump to Post

All 3 Replies

Cascading style sheet is the best language used to describe the presentation semantics of the document written.In this sheet use HTML language.Style sheet is the document itself used for document design.
<a href="http://www.webdevelopmentseo.com/website/css-forum-f4.html">web designing with css</a>

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.