enlarge div on mouseover

I have a <div> element with an image inside of it.  The div is set for 50% width and 10% height.  The image also currently shrinks or expands as you resize the window.  What I want it to do.  Is increase to 70% width and 25% height when you move the mouse over the <div> then shrink back onmouseout.  Any ideas?

johnywhiteAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ZylochConnect With a Mentor Commented:
Hi johnywhite,

Do you mean:

<div style="width:50%; height: 10%; border: 1px solid black;" onmouseover="this.style.width='70%'; this.style.height='25%';" onmouseout="this.style.width='50%'; this.style.height='10%';">Testing</div>

Regards,
Ted
0
 
johnywhiteAuthor Commented:
Is there anyway to make it overlap other elements without setting the position absolutely?
0
 
ZylochCommented:
Not that I know of. z-index works with both position absolute and position relative, but relative positioning keeps the object inline with the document so it will always create more space for it as it expands.
0
 
mazzachreConnect With a Mentor Commented:
Eventually you could:

function show_bigger() {
  document.bigger.style.top = mouse.y;
  document.bigger.style.left = mouse.x;
  document.bigger.style.display = block;
}

<div id="bigger" style="display:none; width:70%; height:25%; z-index:10;">

<div style="width: 50%; height: 25%;" onmouseover="show_bigger()">

Or place them at the same place and don´t move "bigger" with the mouse
0
 
johnywhiteAuthor Commented:
They will work well enough for what I need thanks.
0
All Courses

From novice to tech pro — start learning today.