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