We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Today we’d like to share with you fullscreen slider with fancy animations that, we hope will inspire you and give you some ideas for your next project. Of course, this fullscreen slider you can freely use in your projects, too. The effects are powered by CSS3 and with the help of Greensock.

COIDEA - Fullscreen slider with thumbs and modal

Attention: We are using some modern CSS techniques and properties for the demos so please view them in a modern browser.

The Markup

We will use some simple structure for fullscreen slider and popup, too and we will add some "data" attributes to slider items for easily collecting all info from the clicked item. We will use one blank div as a holder of our background image.

<!-- COIDEA:demo:slider START -->
<div class="coidea-slider">

  <!-- COIDEA:demo:slider:background-holder START -->
  <div class="coidea-slider-background-holder"></div>
  <!-- COIDEA:demo:slider:background-holder END -->

  <div class="coidea-slider-items">
    <!-- COIDEA:demo:slider:item START -->
    <div class="coidea-slider-item" data-image="path/to/image.jpg" data-headline="Headline" data-excerpt="This is excerpt" data-permalink="#">
      <img src="path/to/image.jpg" alt="" />
    </div>
    <!-- COIDEA:demo:slider:item END -->
  </div>

</div>
<!-- COIDEA:demo:slider END -->

<!-- COIDEA:demo:slider:modal START -->
<div class="coidea-slider-modal">
    <div class="coidea-slider-modal-inner">
      <div class="coidea-modal-close"></div>
      <h2></h2>
      <div class="excerpt"></div>
      <a class="permalink" href="">DISCOVER MORE</a>
    </div>
</div>
<!-- COIDEA:demo:slider:modal END --> 

The CSS

We will have the following styles for our fullscreen slider and modal:

/* coidea: SLIDER */

body #coidea .coidea-slider {
  background-color: #000000; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(8, 15, 15, 1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(8, 15, 15, 1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(8, 15, 15, 1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080F0F', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  position: absolute;
  display: block;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}

body #coidea .coidea-slider .coidea-slider-background-holder {
  position: absolute;
  display: block;
  width: 100%;
  width: 100vw;
  height: 100%;
  height: 100vh;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

body #coidea .coidea-slider .coidea-slider-items {
  position: absolute;
  display: block;
  width: 100%;
  width: 100vw;
  height: 120px;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
}

body #coidea .coidea-slider .coidea-slider-items .coidea-slider-item {
  position: relative;
  display: block;
  width: 31.3333%;
  width: 31.3333vw;
  height: auto;
  margin: 0 2%;
  margin: 0 1vw;
  border-radius: 6px;
  overflow: hidden;
  float: left;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  cursor: pointer;
  outline: 0px none;
  outline: 0px;
  transition: margin-top .35s ease-in-out;
}

body #coidea .coidea-slider .coidea-slider-items .coidea-slider-item:hover {
  margin-top: -32px;
}

body #coidea .coidea-slider .coidea-slider-items .coidea-slider-item img {
  position: relative;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

/* coidea: MODAL */

body #coidea .coidea-slider-modal {
  background-color: #FAFAFA;
  position: absolute;
  display: block;
  width: 31.3333%;
  width: 31.3333vw;
  height: 300px;
  bottom: -380px; left: 50%; 
  margin-left: -15.66665%; 
  margin-left: -15.66665vw;
  z-index: 10;
  border-radius: 6px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  text-align: center;
}

body #coidea .coidea-slider-modal h2 {
  font-family: 'Fjalla One', sans-serif;
  font-size: 32px;
  line-height: 145%;
  text-transform: uppercase;
}

body #coidea .coidea-slider-modal .excerpt {
  position: relative;
  display: block;
  padding: 0 0 15px;
  margin-bottom: 15px;
}

body #coidea .coidea-slider-modal .permalink {
  font-family: 'Fjalla One', sans-serif;
  background-color: #080F0F;
  position: relative;
  display: inline;
  padding: 10px 16px 8px;
  border-radius: 6px;
  border: 1px solid #080F0F;
  color: #F4F4F4;
  text-decoration: none;
  outline: 0px none;
  outline: 0px;
  transition: all .45s ease-in-out;
}

body #coidea .coidea-slider-modal .permalink:hover {
  background-color: rgba(8, 15, 15, 0.025);
  color: #080F0F;
}

body #coidea .coidea-slider-modal .coidea-slider-modal-inner {
  position: relative;
  display: block;
  width: 96%;
  width: calc( 100% - 64px );
  height: auto;
  padding: 32px;
  overflow: visible;
}

body #coidea .coidea-slider-modal .coidea-slider-modal-inner .coidea-modal-close {
  background-color: #A52422;
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  top: -16px;
  right: -16px;
  cursor: pointer;
  transform: scale(0);
}

I hope you enjoyed this challenge and find it useful and inspiring!

References and Credits