Difference between revisions of "Template:AshesiGhana/CSS:carousel"

Line 44: Line 44:
 
.item:nth-child(1) {
 
.item:nth-child(1) {
 
     background: url(https://static.igem.org/mediawiki/2017/c/ce/T--AshesiGhana--info2.png) no-repeat center center fixed;
 
     background: url(https://static.igem.org/mediawiki/2017/c/ce/T--AshesiGhana--info2.png) no-repeat center center fixed;
     -webkit-background-size: cover;
+
     -webkit-background-size: auto;
     -moz-background-size: cover;
+
     -moz-background-size: auto;
     -o-background-size: cover;
+
     -o-background-size: auto;
     background-size: cover;
+
     background-size: auto;
 
}
 
}
 
.item:nth-child(2) {
 
.item:nth-child(2) {

Revision as of 13:38, 16 October 2017

.carousel-fade .carousel-inner .item {

   opacity: 0;
   transition-property: opacity;

} .carousel-fade .carousel-inner .active {

   opacity: 1;

} .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {

   left: 0;
   opacity: 0;
   z-index: 1;

} .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {

   opacity: 1;

} .carousel-fade .carousel-control {

   z-index: 2;

} @media all and (transform-3d), (-webkit-transform-3d) {

   .carousel-fade .carousel-inner > .item.next,
   .carousel-fade .carousel-inner > .item.active.right {
       opacity: 0;
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
   }
   .carousel-fade .carousel-inner > .item.prev,
   .carousel-fade .carousel-inner > .item.active.left {
       opacity: 0;
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
   }
   .carousel-fade .carousel-inner > .item.next.left,
   .carousel-fade .carousel-inner > .item.prev.right,
   .carousel-fade .carousel-inner > .item.active {
       opacity: 1;
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
   }

} .item:nth-child(1) {

   background: url(T--AshesiGhana--info2.png) no-repeat center center fixed;
   -webkit-background-size: auto;
   -moz-background-size: auto;
   -o-background-size: auto;
   background-size: auto;

} .item:nth-child(2) {

   background: url(GhanaSite.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

} .item:nth-child(3) {

   background: url(T--AshesiGhana--teampic6.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

} .carousel {

   z-index: -99;

} .carousel .item {

   position: fixed;
   width: 100%;
   height: 100%;

} .title {

 text-align: center;
 margin-top: 20px;
 padding: 10px;
 text-shadow: 2px 2px #000;
 color: #FFF;

}