Team:UCLA/Template/CSS test

From 2014.igem.org

(Difference between revisions)
Line 519: Line 519:
<!--BLURB BOXES-->
<!--BLURB BOXES-->
-
.pageOption {
+
body{
-
    position: relative;
+
background-color:aliceblue;
-
    width: 900px;
+
-
    height: 600px;
+
}
}
-
.pageOption .photo {
+
.layer{
-
    position: absolute;
+
position: absolute;
-
    top: 0px;
+
z-index: 9999;
-
    left: 0px;
+
right: 0px;
-
    width: 900px;
+
top: 0px;
-
    height: 600px;
+
-
    background: url('http://froggyadventures.com/wp-content/uploads/galleries/post-93/full/placeholder%20-%20Copy%20(2).gif') no-repeat 0 0;
+
}
}
-
.pageOption .cinema {
+
.bigsize{
-
    position: absolute;
+
width: 500px;
-
    bottom: 0px;
+
height: 500px;
-
    right: 0px;
+
}
-
    width: 900px;
+
 
-
    height: 600px;
+
#peel{
-
    background: url('http://www.akronschools.com/static/image/placeholder.jpg') no-repeat 0 0;
+
width: 120px;
 +
height: 120px;
 +
overflow: hidden;
 +
-webkit-transition: all 500ms;
 +
}
 +
#peel:hover{
 +
width: 500px;
 +
height: 500px;
 +
}
 +
#image{
 +
background-image: url('http://lab.htm.co.il/peel/large.jpg');
 +
-webkit-mask-image: url('http://lab.htm.co.il/peel/mask2.png');
 +
-webkit-mask-repeat: no-repeat;
 +
-webkit-mask-position: 420px 0;
 +
-webkit-transition: all 500ms;
 +
}
 +
#peel:hover #image{
 +
-webkit-mask-position: 148px 0px;
 +
}
 +
 
 +
#reverse{
 +
position: absolute;
 +
z-index: 2;
 +
right: -416px;
 +
top: -417px;
 +
-webkit-transform: scaleX(-1) rotate(90deg);
 +
-webkit-mask-image: url('http://lab.htm.co.il/peel/mask.png');
 +
-webkit-mask-repeat: no-repeat;
 +
-webkit-mask-position: 124px 0;
 +
-webkit-transition: all 500ms;
 +
}
 +
 
 +
#peel:hover #reverse{
 +
-webkit-mask-position: 110px 0;
 +
right: -141px;
 +
top: -136px;
 +
}
 +
 
 +
#reverse::before{
 +
content: "";
 +
position: absolute;
 +
z-index: 9999;
 +
top: 0;
 +
left: 0;
 +
background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.90) 50%,rgba(255, 255, 255, 0.70) 100%);
 +
width: 500px;
 +
height: 500px;
 +
}
 +
 
 +
 
 +
#shadow{
 +
position: absolute;
 +
width: 510px;
 +
height: 80px;
 +
z-index: 2;
 +
right: -116px;
 +
top: -114px;
 +
background: -webkit-linear-gradient(90deg, transparent 0%,rgba(0, 0, 0, 0.5) 60%);
 +
-webkit-transform: rotate(45deg);
 +
-webkit-transition: all 500ms;
 +
}
 +
#peel:hover #shadow{
 +
width:1290px;
 +
right:-216px;
 +
}
 +
 
 +
 
 +
@-webkit-keyframes spin{
 +
  0%  { -webkit-transform: scaleX(-1) rotate(90deg);}
 +
  50% { -webkit-transform: scaleX(-1) rotate(91deg);}
 +
  100% { -webkit-transform: scaleX(-1) rotate(90deg);}
 +
}
 +
 
 +
#reverse{
 +
  -webkit-animation-name: spin;
 +
  -webkit-animation-duration: 3s;
 +
  -webkit-animation-iteration-count: infinite;
}
}
</style>
</style>
</html>
</html>

Revision as of 22:01, 11 August 2014

Retrieved from "http://2014.igem.org/Team:UCLA/Template/CSS_test"