How can I expand images on hover with canvas?

Question

I really like in this example http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/ how the images expand on hover. I know how I could do this with jquery but I also know it wouldn't be as fast and reliable. I could give it a try with d3js but I am really new to it, any idea where I could start or other viable alternatives?

thanks

Answer 1

Try this:

html:

<div style = "display:inline;" id = "imgBar">
</div>

css:

#imgBar{
//CSS here
}

#imgBar > img:hover{
width:200px; //Just set the width to double it's default value
height:200px; //Same as above; 200px is just a dummy value
}

Then, you can add images to the div with javascript.

---

Good Luck!