Template:CSS/style2

From 2014.igem.org

(Difference between revisions)
Line 576: Line 576:
}
}
 +
 +
 +
 +
.sponsors_iitd{
 +
width:95%;
 +
height:200px;
 +
position:absolute;
 +
top:0px;
 +
left:20px;
 +
border: thin solid grey;
 +
float:left;
 +
display:inline;
 +
}
 +
 +
.sponsors_iitd2{
 +
width:70%;
 +
height:120px;
 +
position:absolute;
 +
top:50px;
 +
left:200px;
 +
border: thin solid grey;
 +
float:left;
 +
display:inline;
 +
 +
}
 +
.pic1{
 +
width:100px;
 +
height:100px;
 +
position:absolute;
 +
top:5px;
 +
left:30px;
 +
}
 +
.pic2{
 +
position:absolute;
 +
top:5px;
 +
left:130px;
 +
width:100px;
 +
height:100px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic3{
 +
position:absolute;
 +
top:5px;
 +
left:230px;
 +
width:100px;
 +
height:100px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic4{
 +
position:absolute;
 +
top:5px;
 +
left:330px;
 +
width:100px;
 +
height:100px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic5{
 +
position:absolute;
 +
top:5px;
 +
left:430px;
 +
width:100px;
 +
height:100px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic6{
 +
position:absolute;
 +
top:5px;
 +
left:530px;
 +
width:100px;
 +
height:100px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
.pic7{
 +
position:absolute;
 +
top:5px;
 +
left:630px;
 +
width:100px;
 +
height:100px;
 +
-webkit-transition:all 0.3s linear 0s;
 +
}
 +
 +
 +
.pic1:hover+.pic2{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(100px,0);
 +
    -webkit-transform: translate(100px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(100px,0); /** Opera **/
 +
    -moz-transform: translate(100px,0); /** Firefox **/
 +
}
 +
 +
.pic2:hover+.pic3{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(100px,0);
 +
    -webkit-transform: translate(100px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(100px,0); /** Opera **/
 +
    -moz-transform: translate(100px,0); /** Firefox **/
 +
}
 +
 +
.pic3:hover+.pic4{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(100px,0);
 +
    -webkit-transform: translate(100px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(100px,0); /** Opera **/
 +
    -moz-transform: translate(100px,0); /** Firefox **/
 +
}
 +
 +
.pic4:hover+.pic5{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(100px,0);
 +
    -webkit-transform: translate(100px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(100px,0); /** Opera **/
 +
    -moz-transform: translate(100px,0); /** Firefox **/
 +
}
 +
 +
.pic5:hover+.pic6{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(100px,0);
 +
    -webkit-transform: translate(100px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(100px,0); /** Opera **/
 +
    -moz-transform: translate(100px,0); /** Firefox **/
 +
}
 +
 +
.pic6:hover+.pic7{
 +
-webkit-transition:all 0.3s linear 0s;
 +
transform: translate(100px,0);
 +
    -webkit-transform: translate(100px,0); /** Safari & Chrome **/
 +
    -o-transform: translate(100px,0); /** Opera **/
 +
    -moz-transform: translate(100px,0); /** Firefox **/
 +
}
 +
 +
 +
 +
.smallpic{
 +
width:100px;
 +
height:100px;
 +
border-radius:10px;
 +
z-index:52;
 +
}
 +
 +
.picdescription{
 +
position: absolute;
 +
left:100px;
 +
top:0px;
 +
width:0px;
 +
height:100px;
 +
border-radius:10px;
 +
background-color:red;
 +
-webkit-transition:all 0.3s linear 0s;
 +
z-index:52;
 +
}
 +
 +
.smallpic:hover + .picdescription{
 +
width:100px;
 +
height:100px;
 +
border-radius:10px;
 +
}
</style>
</style>
</html>
</html>

Revision as of 11:48, 16 October 2014