A pure CSS image hover

Posted by & filed under Code Snippets, CSS.

CSS Code Snippet

The traditional method to creating a great image hover was to use Javascript. Now, thanks to CSS3, it is just not necessary to do so. Reduce your page load times by just initiating this CSS.   Simple and Effective CSS   #mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 30px auto 0 auto;…

Read more »

Use just 3 lines of CSS to vertically align content

Posted by & filed under Code Snippets, CSS.

CSS Code Snippet

Using CSS3s ‘transform’ property we can simply and easily vertically align content. The transform property was designed to enable simple animations such as rotating and scaling elements, however we can manipulate content with transform:translateY. To do this all we need to write is .element { position: relative; transform: translateY(-50%); top: 50%; } This is all…

Read more »