Expanding Div to fit Proportional Image

Question

I want the div 'expand' to expand to a set height when hovered over and then revert back to the original height of the div on mouse out.

My problem is that the images inside 'expand' needs to remain proportional and thus its height is going to vary depending on the browser width.

So I need some code (html, css, javascript, jQuery, PHP, etc.) that will set the div 'expand' to expand to a preset height on hover and then revert to the height of the image (plus a 5 pixel padding on all sides).

The markup:

  <html>
    <head>
    <style>
    .expand{
        background-color: red;
        height: auto;
        padding: 5px;
        width: 18%;
    }
    </style>
    </head>
    <body>
    <div class="expand">
        <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
        <h3>The Demon King</h3>
        <h5>Cinda Williams Chima</h5>
        <p>jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'</p>
    </div>
    </body>
  </html>

I have tried a css fix that doesn't work with the proportional image thing. And then a little bit of javascript, but I'm not very familiar with the language. — Ovec8hkin, Aug 10 '14 at 01:56
Does the image need to change height as well? If not, simply set your fixed height on hover, and revert back to `auto` for the non-hover state. (Or was “expand” supposed to mean _animated?_ Then you will have to use jQuery or at least JavaScript, because animating the height property from a fixed value back to `auto` is not possible with CSS alone.) — CBroe, Aug 10 '14 at 01:58
Or do you simply want to hide the text content initially and reveal it on hover? Then you could hide it via `display:none`, and make it appear on hover. (You might need to involve absolute positioning, so that this doesn’t mess with the rest of the layout.) — CBroe, Aug 10 '14 at 02:01
The image doesn't need to change height when the div is expanded but I can't set a fixed height for the div to return to on mouse out, because the height of the image will be different depending on the browser size. — Ovec8hkin, Aug 10 '14 at 02:03
as @CBroe said you just have to declare the width and height of the expand div on hover state, and also declare the height (or width) of the image inside the expand div (the css would be: `.expand:hover img {width:(somewidth), height:auto}` Very easy — gerardo flores, Aug 10 '14 at 03:26

score 1 · Answer 1 · answered Aug 10 '14 at 03:13

You have to get first the original height of the div you want to expand, like this:

var height = $(".expand").css('height');

and animate that div using .animate into a desired height, lets say 500px:

$(".expand").on("mouseenter",function(){
    $(this).animate({"height":"500px"},"slow");
})

and animate back to the original height:

var height = $(".expand").css('height');
$(".expand").on("mouseleave",function(){
    $(this).animate({"height":height},"slow");
})

Note: Be sure to close all your tags. I noticed your <img> without a closing that's why your <p> tag won't wrap inside the div. I'd fixed that in this FIDDLE

score 0 · Answer 2 · answered Aug 10 '14 at 02:06

You want to use jQuery's mouseover and mouseout functions coupled with the animation function. You will need to select your div and bind a function to its onmouseover event. Consider the following rendition of your HTML body:

<div id="expand">
    <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
    <h3>The Demon King</h3>
    <h5>Cinda Williams Chima</h5>
    <p>Text</p>
</div>

Here, we've given your div an id "expand", so we can easily select it using jQuery and bind functionality to it's onmouseover event using the mouseover function:

var expanded = "2000px";
var time = 2000;

$("#expand").mouseover(function(){
  $( "#expand" ).animate({
    height: expanded
  }, time);
});

To have the div contract, you'd want to use jQuery's mouseout function to bind to the element's onmouseout event:

$("#expand").mouseout(function(){
  $( "#expand" ).animate({
    height: contracted
  }, time);
});

This mouseout functionality in this case is hard to demonstrate in jsfiddle, but hopefully the following jsfiddle helps you obtain the behavior you desire: http://jsfiddle.net/9dmzytm7/

Expanding Div to fit Proportional Image

2 Answers2