web-components/dist/striped-slider.css

Build and Test React Components in real time

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.item {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;

  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-transition: -webkit-box-flex .2s;

  transition: -webkit-box-flex .2s;

  transition: flex .2s;

  transition: flex .2s, -webkit-box-flex .2s, -ms-flex .2s;
  cursor: pointer
}

.item:hover {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
}

.item-inner {
  width: 100%;
  height: 100%;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  text-align: center;
  -webkit-transition: background-image .2s;
  transition: background-image .2s
}

.item-inner h2 {
  -webkit-transform: translate3d(0, -60px, 0);
          transform: translate3d(0, -60px, 0);
}

.item-inner span {
  -webkit-transform: translate3d(0, 60px, 0);
          transform: translate3d(0, 60px, 0);
}

.item-inner * {
  padding: 0 15px;
  visibility: hidden;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.item-inner:hover {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.8" /><feFuncG type="linear" slope="0.8" /><feFuncB type="linear" slope="0.8" /></feComponentTransfer></filter></svg>#filter');
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
}

.item-inner:hover * {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
  -webkit-transition: all .2s .2s;
  transition: all .2s .2s;
}