Fade Transitions

    <link href="http://sitedyes.com/_css/pattern/fade_transitions.css" rel="stylesheet" type="text/css">



Styles:


dye_trans_horiz-lt
dye_trans_horiz-lt-rev
dye_trans_horiz-md
dye_trans_horiz-md-rev
dye_trans_horiz-dk
dye_trans_horiz-dk-rev
dye_trans_vert-lt
dye_trans_vert-lt-rev
dye_trans_vert-md
dye_trans_vert-md-rev
dye_trans_vert-dk
dye_trans_vert-dk-rev

Example of 3 rows with reverse hover
Row 1

Row 2

Row 3
html:

    <div class="dye_trans_horiz-lt dye_trans_horiz-lt-rev-hover" style="width: 100%; height: 100px;"><br>
      <div style="text-align: center;">Example of 3 rows with reverse hover<br>
        Row 1</div>
    </div>
    <div class="dye_trans_horiz-lt dye_trans_horiz-lt-rev-hover" style="width: 100%; height: 100px;"><br>
      <div style="text-align: center;">Row 2</div>
    </div>
    <div class="dye_trans_horiz-lt dye_trans_horiz-lt-rev-hover" style="width: 100%; height: 100px;"><br>
      <div style="text-align: center;">Row 3</div>
      <br>
    </div>

Example of 3 Column with reverse hover
(bootstrap)

Column 1

Column 2

Column 3
html:


    <div class="container">
      <div class="row">
        <div class="col-12" style="text-align: center;">Header<br>
        </div>
        <div class="dye_trans_vert-lt dye_trans_vert-lt-rev-hover col-4" style="width: 100%; height: 100px;"><br>
          <div style="text-align: center;">Column 1</div>
        </div>
        <div class="dye_trans_vert-lt dye_trans_vert-lt-rev-hover col-4" style="width: 100%; height: 100px;"><br>
          <div style="text-align: center;">Column 2</div>
        </div>
        <div class="dye_trans_vert-lt dye_trans_vert-lt-rev-hover col-4" style="width: 100%; height: 100px;"><br>
          <div style="text-align: center;">Column 3</div>
        </div>
        <div class="col-12" style="text-align: center;">footer<br>
        </div>
      </div>
    </div>
Row navi color

Column 1

Column 2

Column 3
footer