0

This is a follow up on:

Expanding Div..... stackoverflow

I want to add more content in the hovered state. Say 'Normal' (w:100px, h:100px) has an 50px(w/h) image centered with a small centered caption under it. 'Hover' (w:300px, h:100px) has the same as 'Normal', but it can either expand on the left side of the image and caption or right side and there is more content on the other side.

How would I go about doing that?

Harley

Community
  • 1
  • 1
Harley Frank
  • 149
  • 2
  • 11

1 Answers1

1

Try this:

.myDiv .hoverContent {
    display: none;
}
.myDiv:hover .hoverContent {
    display: block;
}
.myDiv:hover img {
    float: left;
}
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • I am doing this via .js, http://jsfiddle.net/harmeister/a4n6e/18/ this is what I have gotten so far. I am having some trouble figuring out where I went wrong, when you look at it you will know what I am talking about. – Harley Frank Oct 12 '11 at 21:53
  • @Harley - Yes, use JavaScript for the animation. You can still use pure CSS for showing and hiding the content though: http://jsfiddle.net/gilly3/a4n6e/33/ – gilly3 Oct 13 '11 at 00:00
  • thank you for the help. I was so confused. Thank you so much. – Harley Frank Oct 15 '11 at 19:15
  • Wanted to express my thanks as well. I have a bit more complicated layout than what you've fiddled here, but this is basically the primary essence of what I needed to do. And it's done very cleanly. Thank you. – Huginn Dec 21 '16 at 14:01