How to create pure CSS hover box effect!

Hi,
This tutorial is about how to make a pure .css document which enlarges images or you can also call it a hover box!
So first of all you to do is create an html document and name it index.html, this is going to be your homepage! The code of the document is written down below!
Index.html



So now after you have created this easy document your second step should be to create a new folder and name it as css. So till now you have 2 items available in your document which are: index.html and a folder named as css! Refer the pic below!

Now all that you have to do is create a new css document and save it in css folder! The code for the css document is available down here! The name of your css document will be hoverbox.css!

Hoverbox.css

After creating hoverbox.css we need to create a css document which can make this application work in internet explorer. So, therefore the name of your second .css document will be ie_fixes.css! Down here is the code for it!

Ie_fixes.css  

Now that you have created this document css folder should have items which should look like this!

Now last but not the least… you have to create a document known as img in your root folder!

And then insert some images in it! (Be sure that you don’t forget to download source files of this document). Your root file (document) should somewhat look like this!

Thank you and don’t forget to comment!