003. Change.

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,700|Merriweather:100,200,300);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:100,300,400);
body{
background: #222;
}
body, a, a:hover {
cursor: url(http://i.picpar.com/QaYb.png), auto;
}
::-webkit-scrollbar-thumb {
width: 0px;
background: transparent;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::selection {
color: #000;
}
::-moz-selection {
color: #000;
}

/*-- white space --*/
.white{
position: fixed;
top: 60px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 460px;
width: 450px;
background-color: #fff;
}

/*-- titles --*/

.title-one{
position: fixed;
top: -300px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 40px;
width: 400px;
line-height: 40px;
text-align: center;
text-transform: uppercase;
font-family: 'merriweather';
font-size: 20px;
color: #333; /*-- first title font color --*/
word-spacing: 5px;
overflow: hidden;
}

.title-two{
position: fixed;
top: -230px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 60px;
width: 400px;
line-height: 60px;
text-align: center;
text-transform: uppercase;
font-family: 'roboto';
font-size: 40px;
font-weight: 100;
color: #222; /*-- second title font color --*/
letter-spacing: 1px;
overflow: hidden;
}

.titlethree{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -570px;
margin: auto;
height: 20px;
line-height: 20px;
width: 400px;
color: #fff;
font-family: 'roboto condensed';
text-transform: uppercase;
font-size: 10px;
text-align: center;
}
.change{
color: #fff; /*-- BOTTOM TEXT FONT COLOR MAIN PAGE --*/
font-family: 'roboto condensed';
text-transform: uppercase;
font-size: 10px;
display: inline-block;
transition: .9s linear;
}
.con1:target .change{
color: #3e3e3c;  /*-- BOTTOM TEXT FONT COLOR PAGE #1 --*/

transition: .9s linear;
}
.con2:target .change{
color: #83a39a; /*-- BOTTOM TEXT FONT COLOR PAGE #2 --*/
transition: .9s linear;
}
.con3:target .change{
color: #f36562; /*-- BOTTOM TEXT FONT COLOR PAGE #3 --*/
transition: .9s linear;
}
/*-- images / tabs --*/

.con1{
}
.con2{
}
.con3{
}

.backing{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: #222;
transition: .9s linear;
}
.con1:target .backing{
background-color: #b0dfdf;
transition: .9s linear;
}
.con2:target .backing{
background-color: #444f6b;
transition: .9s linear;
}
.con3:target .backing{
background-color: #d8d3c6;
transition: .9s linear;
}

.imgone{
position: fixed;
top: 0px;
left: -265px;
right: 0px;
bottom: -140px;
margin: auto;
height: 300px;
width: 100px;
background-image: url('http://i.picpar.com/zPfc.jpg'); /*-- #1 background img link --*/
background-repeat: no-repeat;
background-position: center; /*-- #1 background position --*/
opacity: .8;
transition: .9s linear;
}
.imgone:hover{
opacity: 1;
transition: .9s linear;
}
.con1:target .imgone{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -140px;
margin: auto;
width: 370px;
z-index: 3;
transition: .9s linear;
}
.con2:target .imgone{
opacity: 0;
transition: .9s linear;
}
.con3:target .imgone{
opacity: 0;
transition: .9s linear;
}

.imgtwo{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -140px;
margin: auto;
height: 300px;
width: 100px;
background-image: url('http://i.picpar.com/1Pfc.jpg'); /*-- #2 background img link --*/
background-repeat: no-repeat;
background-position: center; /*-- #2 background position --*/
opacity: .8;
transition: .9s linear;
}
.imgtwo:hover{
opacity: 1;
transition: .9s linear;
}
.con1:target .imgtwo{
opacity: 0;
transition: .9s linear;
}
.con2:target .imgtwo{
width: 370px;
z-index: 3;
transition: .9s linear;
}
.con3:target .imgtwo{
opacity: 0;
transition: .9s linear;
}

.imgthree{
position: fixed;
top: 0px;
left: 0px;
right: -265px;
bottom: -140px;
margin: auto;
height: 300px;
width: 100px;
background-image: url('http://i.picpar.com/7Pfc.jpg'); /*-- #3 background img link --*/
background-repeat: no-repeat;
background-position: top center; /*-- #3 background position --*/
opacity: .8;
transition: .9s linear;
}
.imgthree:hover{
opacity: 1;
transition: .9s linear;
}
.con1:target .imgthree{
opacity: 0;
transition: .9s linear;
}
.con2:target .imgthree{
opacity: 0;
transition: .9s linear;
}
.con3:target .imgthree{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -140px;
margin: auto;
width: 370px;
z-index: 3;
transition: .9s linear;
}


/*- text boxes -*/

.text1{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -140px;
margin: auto;
height: 280px;
width: 350px;
background-color: rgba(366,366,366,.7);
overflow: auto;
opacity: 0;
color: #000;
font-family: 'roboto condensed';
text-transform: uppercase;
font-size: 10px;
text-align: justify;
overflow: hidden;
visibility: hidden;
transition: .9s linear;
}
.con1:target .text1{
opacity: 1;
visibility: visible;
z-index: 5;
transition: .9s linear;
transition-delay: 1s;
}

.text2{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -140px;
margin: auto;
height: 280px;
width: 350px;
background-color: rgba(366,366,366,.7);
overflow: auto;
opacity: 0;
color: #000;
font-family: 'roboto condensed';
text-transform: uppercase;
font-size: 10px;
text-align: justify;
overflow: hidden;
visibility: hidden;
transition: .9s linear;
}
.con2:target .text2{
opacity: 1;
visibility: visible;
z-index: 5;
transition: .9s linear;
transition-delay: 1s;
}

.text3{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: -140px;
margin: auto;
height: 280px;
width: 350px;
background-color: rgba(366,366,366,.7);
overflow: auto;
opacity: 0;
color: #000;
font-family: 'roboto condensed';
text-transform: uppercase;
font-size: 10px;
text-align: justify;
overflow: hidden;
visibility: hidden;
transition: .9s linear;
}
.con3:target .text3{
opacity: 1;
visibility: visible;
z-index: 5;
transition: .9s linear;
transition-delay: 1s;
}


.txt{
margin: 10px;
height: 260px;
width: 330px;
overflow: auto;
}

</style>
<div class="con3" id="three">
<div class="con2" id="two">
<div class="con1" id="one">

<div class="backing"></div>
<div class="white"></div>

<a href="#one">
<div class="imgone"></div>
</a>
<div class="text1">
<div class="txt">
one.
</div>
</div>

<a href="#two">
<div class="imgtwo"></div>
</a>
<div class="text2">
<div class="txt">
two.
</div>
</div>
<a href="#three">
<div class="imgthree"></div>
</a>
<div class="text3">
<div class="txt">
three.
</div>
</div>


<div class="title-one">
phos / houseki / 300 years old
</div>
<a href="#">
<div class="title-two">
phosphophyllite
</div>
</a>
<div class="titlethree">
the inevitable outcome was simple:
<div class="change">change.</div>
</div>