Member Avatar for GeekPlease

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
  • 197 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by designershiv

Recommended Answers

All 3 Replies

Member Avatar for sana_3

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>

Member Avatar for designershiv

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.