1 Replies - 1009 Views - Last Post: 19 October 2013 - 10:41 AM

#1 pingu09  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 19-October 13

Expandable div on :hover event

Posted 19 October 2013 - 10:08 AM

hi Ive got a situation here...

Ive got CSS which makes my div x pt tall. But i need this div to enlarge on hover. Hover height should depends on content of div which is usually some <p> or images. + This :hover height should count with 20px padding...

not sure if it matters but whole :hover effect is styled as transition css option so its animated. (or sould be :D )

im pretty sure its done by display inline block or something like that, but I thing that i tried almost everything i know.

*sry for my english, not my mother language.

Is This A Good Question/Topic? 0
  • +

Replies To: Expandable div on :hover event

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3516
  • View blog
  • Posts: 12,005
  • Joined: 12-December 12

Re: Expandable div on :hover event

Posted 19 October 2013 - 10:41 AM

If you knew the specific height beforehand this would be pretty straight-forward:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height:100px;
    background: red;
    transition: height 2s;
    -webkit-transition: height 2s; /* Safari */
}

div:hover {
    height: 120px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

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

If you try to modify the hover effect to use height: 120%; it doesn't work, even if you set the original height to 100%.

  • You could use jQuery, which would allow you to determine the element's total, rendered, height after the page has loaded.
  • You might consider an alternative effect, perhaps increasing the font-size.
  • You might put this div in another, larger, div of fixed height, and then I believe the percentage height would work in the hover-effect.

I may be wrong of course, but I don't believe this is possible with css alone.

css variables would help to solve this problem I believe but, unfortunately, they are not currently workable/supported. A css extension language such as Sass is an alternative approach, but I haven't used these myself.

This post has been edited by andrewsw: 19 October 2013 - 10:43 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1