0

I want to create a little information box. So when you hover over the image with your mouse you see a little box in the shape of a cloud and you can read some info in it. I've seen this on loads of websites. I tried searching the whole web, but only found javascript popup boxes. But thoose only popup in a whole new screen.

Help is appriciated! :)

Cheers, Jesse

code:

<html>
<body>
<input type="text" name="username" id="username"><p>
<input type="text" name="password" id="password">
<img src="files.directofficesupport.com/img/randompassgen_16x16.png" alt="Random password generator">
</body>
</html>

1 Answer 1

0

You can try by using the :hover pseudo-element (CSS) and creating a semi-transparent background for the container in order to represent the cloud.

If you provide some HTML code, I can try to help you updating this answer with CSS.

In the meanwhile, you can find a simple, yet beautiful, example in here: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

3
  • IMG is not a valid tag for this purpose. I'll update the answer in order to show what I mean. Dec 30, 2013 at 10:53
  • check the link. I believe it will help you! Dec 30, 2013 at 10:57
  • Thank you very much Opalenzuela!
    – user3141521
    Dec 30, 2013 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.