CSS Before After image with center text

Credit:

css-before-after-image-with-center-text

A cross-browser boilerplate for centering text with before after image. The sample result is : You can also view it live here : Live Sample , Click Here

Tested on :

1. IE 8 - 10 (Yeaah IE compatible :D) ~ IE < 8 is not supporting before after css
2. Mozilla Firefox
3. Chrome
4. Opera

 

How to use it :

1. Download the package, open index.php on sample folder
2. Tweak your CSS According your need. The syntax is straightforward and i also have put some notes on it
3. Standard usage :

   <div class='before-after-center'>
       <span class='wrapper'>
           <h4>Beautifull Center Heading with before after ornament</h4>
       </span>
   </div>
   

Question and support

Please use the github issues forum : https://github.com/todiadiyatmo/css-before-after-image-with-center-text/issues

Download Link

Source code download

css-before-after-image-with-center-text

A cross-browser boilerplate for centering text with before after image.

The sample result is :

You can also view it live here :

Live Sample , Click Here

Tested on :

1. IE 8 – 10 (Yeaah IE compatible :D) ~ IE < 8 is not supporting before after css
2. Mozilla Firefox
3. Chrome
4. Opera

How to use it :

1. Download the package, open index.php on sample folder
2. Tweak your CSS According your need. The syntax is straightforward and i also have put some notes on it
3. Standard usage :

   <div class='before-after-center'>
       <span class='wrapper'>
           <h4>Beautifull Center Heading with before after ornament</h4>
       </span>
   </div>
   

Question and support

Please use the github issues forum : https://github.com/todiadiyatmo/css-before-after-image-with-center-text/issues

Download Link

Source code download

Updated on November 6, 2017 by