Show div on hover span styling

Tags: css,html

Problem :

The title may be a bit misleading.

I have a h3 element inside a span tag and of course it shouldn't go there, however I cannot seem to style the spanned text in the div in the manner I want.

If you hover over the image in the jsfiddle, the hidden div is shown and that is exactly what I want it to look like but if I take the h3 tag away from the text I can't seem to style it with CSS.

Should I be looking at a Jquery alternate? If so any tutorials of guides would be great, thanks

UPDATE: Thanks for all the help so far but I don't think I've explained very well.

The left side is how I would like it to be styled however removing the h3 tags and removing h3 from the class .info causes it to be styled as on the right side. It's the border width, postion and padding I am concerned about the most

Solution :

If anyone is interested I solved the problem.

Instead of using the h3 tags and a span, I removed both and instead put a div inside the div that appeared on hover. You can see what I mean in the below fiddle. Now validates in html5 which is what I was after, thanks for all the help

    CSS Howto..

    How to change an image in CSS that has no class?

    How to structure selectors in css when using specificity?

    Show div on radio button check using JS fallback

    How to write different HTML for different screen sizes

    How to ensure buttons reversed by CSS are spaced evenly?

    How to animate my element in my case?

    How to align with digits inside to the right, jQuery

    how to position a css sprite as background for another class

    CSS - how to avoid class= for every single paragraph?

    Html, table, img & css - how to get text to wrap correctly?

    jquery ui droppable : how to dropp an element outside a div with overflow:hidden?

    How to stop main scrollbar working when popup modal is activated, which needs also a scrollbar

    How to remove gap in masonry?

    How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

    Have element show when .onclick and when the element has focus from tab

    How to create a cross with pure css [duplicate]

    How to make a web form with 3 columns?

    CSS: how to get two floating divs inside another div

    How to format date elements (year, month, date) individually with CSS and Rails i18n?

    How to get border radius and gradient background working together in IE 9

    How can I get the text style from window.selection()?

    how to make div with one line of text and div with two the same height?

    Howto stretch jsf panelgrid in horizontal direction

    how to show different image in div per the screen size?

    How to prevent HTML element moving when resizing window?

    How can I use AngularJS directive to apply css style for a string?

    How to avoid the text inside the bootstrap button overflow?

    How to get equal height for all sections?

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    How to modify a general css using javascript and jquery and return the result as a new id