Team:Warwick/css/slidersheet.css

.slideshow-container { 

 max-width: 1000px;
 position: relative;
 margin: auto;

}

  • {
   box-sizing:border-box;

}

/* Hide the images by default */ .mySlidesFade { 

   display: none;

}

/* Next & previous buttons */ .prev, .next { 

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 background-color: rgba(50,50,50,0.5);

}

/* Position the "next button" to the right */ .next { 

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { 

 background-color: rgba(0,0,0,0.8);

}

/* Caption text */ .text { 

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 4px;
 text-align: center;
 background-color: rgba(50,50,50,0.8);

}

/* Number text (1/3 etc) */ .numbertext { 

 color: #f2f2f2;
 background-color: rgba(50,50,50, 0.8);
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot { 

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.active, .dot:hover { 

 background-color: #717171;

}

/* Fading animation */ .fade { 

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;

}

@-webkit-keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

.text{ 

 height: 35px;
 transition: 0.4s;

}

.slideshow-container:hover .text{ 

 transition: 0.4s ease-out;
 background-color: rgba(50,50,50,0.95);

}

.text_inner{ 

 opacity: 0;
 visibility: hidden;

}

.text_inner h3{ 

 color: #ED483A;

}

.slideshow-container:hover .text_inner{ 

 visibility: visible;
 opacity: 1;
 transition: 0.5s opacity 0.4s;

}

.text:hover .arrows{ 

 display: none;

}

  1. text1{
 width: 30%;
 margin: 0% 35%;

}

.slideshow-container:hover #text1{ 

 height: 450px;
 width: 500px;
 margin: 0px 250px;

}

  1. text2{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text2{ 

 height: 65%;
 width: 500px;
 margin: 0px 250px;

}

  1. text3{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text3{ 

 height: 80%;
 width: 500px;
 margin: 0px 250px;

}

  1. text4{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text4{ 

 height: 65%;
 width: 400px;
 margin: 0px 300px;

}

  1. text5{
 width: 20%;
 margin: 0% 40%;

}

.slideshow-container:hover #text5{ 

 height: 65%;
 width: 500px;
 margin: 0px 250px;

}