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

Dani AI

Generated

For a robust, future-proof effect, avoid animating layout properties (width) on interactive elements — it causes reflow and can be jumpy. As described, the goal is “half page → full page on hover.” is right that you don’t need jQuery; ’s fiddle is a useful demo. Two practical approaches below (one preferred for preserving text, one for pure visual effect).

Use clip-path to reveal the element from the left without resizing its layout. This keeps text crisp and is GPU-friendly in modern browsers; add a CSS fallback for older engines.

<!-- HTML -->
<div class="wrap">
  <div class="panel"></div>
  <div class="content">Other page content</div>
</div>

/* CSS */
.wrap { position:relative; width:100%; height:240px; overflow:hidden; }
.panel {
  position:absolute; inset:0; background:#111;
  /* show left 50% initially, then reveal to full */
  clip-path: inset(0 50% 0 0);
  transition: clip-path 360ms ease;
  will-change: clip-path;
  z-index:2;
}
.wrap:hover .panel { clip-path: inset(0 0 0 0); }

If the panel is purely decorative (no text you need to keep scale-correct), a transform-based technique is very cheap and smooth. It’s great for backgrounds or images, but note it scales everything inside (text will scale).

.panel {
  width:50vw; height:100vh; transform-origin:left center;
  transform: scaleX(1); transition: transform 300ms ease;
  will-change: transform;
}
.wrap:hover .panel { transform: scaleX(2); } /* 50vw -> 100vw visually */

Practical tips: trigger the animation from the wrapper (use .wrap:hover .panel) to avoid hover flicker; use z-index so the expanding panel sits above other content; add will-change hints sparingly. For touch devices, toggle a class with a tiny script and update aria-expanded for accessibility:

wrap.addEventListener('click', e => wrap.classList.toggle('expanded'));

If clip-path isn’t supported, provide an @supports fallback that animates max-width or adds a JS class.

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="">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.