Animated HTML hover effect via image hotspots

I have a map of the world, with a number of countries pin-pointed on it. Each pin-point has a dotted line drawn from it, to the maps 'edge' where a little extra information (1x icon and 3-5 words of text) is found. At the moment this is just a static image, with all pin points, all lines, and all information visible. What i would like, is for someone to take this and create with HTML/CSS, hot spots on the image at those pin-point locations, so that we can replace the image with a version without the pin-points/lines/extra info on it; and when the user hovers their mouse over the pin-point hot spot, the line and subsequent information related to that individual pin-point will *become* visible. If the line can be 'drawn' (animated) from the pin-point to the information and then the information fade in a half second later, that would be great. So then this static 'map' image with pin points, lines and information, becomes dynamic and animated :) A single line + the information, would only appear once the hot spot has been hovered over by the user. See image attached. The 'lighter' box container around the text, contains space for an icon to be inserted alongside the text (same height as all 3 lines of text). Though the container box is not to be visible. I imagine the container box to be an absolutely positioned z-index DIV maybe? With a transparent background, so that on hover of the hot spot, only the information inside the DIV appears visible, via fade transition ease-in.