周围 div 上方的 CSS 变换

Question

我正在尝试在悬停时展开猫头鹰轮播项目（并最终在点击时显示内容）。它大部分都在那里，但我需要每个项目的扩展都位于其他项目之上，而不会打扰它们。我已经看到使用相对位置和绝对位置来回答各种周围 div 的类似问题，但到目前为止，将 item 设置为 Absolute 会使它们全部消失。我有一个Codepen 来处理这个问题。任何可以提供的帮助将不胜感激。

（作为一个侧面，有一次我的副标题很好地位于项目框的底部，但沿着这条线的某个地方消失了。我很想知道为什么，因为我没有触摸该 div 的 css。）

我不知道为什么有人告诉我指向 Codepen 的链接必须附有代码。我认为这就是使用像 CodePen 这样的网站的意义所在，因此不必在此处对一堆代码进行烦人的格式化。所以，这里只是一小段代码。如果你真的需要它，我会在这里输入，但希望避免这种情况。

<div class="wrapper-with-margin">
    <div id="owl-demo" class="owl-carousel">
        <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(imagepath.jpg);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(217,48,19);"></div>
            <div class="tile_content tile_element">
            <div class="tile_icon">
                <i class="fa fa-asterisk fa-4x"></i>
            </div>
            <div class="tile_title">
                <h2>About Me</h2>
            </div>
            <div class="tile_subtitle">
                <h3>Profile</h3>
            </div>
        </div>
        <div class="tile_element tile_effect"></div>
        <div id="Profile" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="background-color: rgb(238, 238, 238); position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
            <p>Lucas ipsum dolor sit amet skywalker moff padmé mon skywalker moff moff luuke binks jabba. Mon mustafar c-3p0 mustafar antilles calamari organa. Solo wedge moff gonk c-3p0 dantooine chewbacca darth. Lando darth coruscant kessel qui-gonn mara maul dantooine. Jabba organa solo skywalker hutt kenobi qui-gonn. Luuke vader darth binks alderaan ahsoka wicket antilles wedge. Chewbacca leia tusken raider organa calrissian. Thrawn baba solo moff. Windu darth kashyyyk hutt kashyyyk gamorrean maul. Skywalker kit moff wedge coruscant amidala.</p>
            <p>Hutt organa maul wicket. Binks droid wampa ewok bespin skywalker hutt. Windu darth coruscant moff wicket fisto solo cade. Amidala jabba calrissian alderaan solo dagobah gonk. Hutt han darth kessel lobot jade. Padmé mandalore luke kenobi. Owen hutt chewbacca vader leia solo baba dagobah. Watto jinn greedo kit sidious wookiee. Yavin anakin kit kessel padmé darth jinn zabrak gonk. Darth wedge jawa yoda skywalker bespin bespin fett. Kessel tatooine mara padmé. Sidious organa obi-wan wicket solo. Sidious gonk leia moff luke lars skywalker yavin coruscant.</p>
            <p>Luke qui-gon moff fett antilles. Sidious antilles organa wookiee. Coruscant dagobah qui-gonn kit sidious baba yoda skywalker wampa. Dooku moff cade lobot calamari. Gonk ponda kamino dantooine owen luke luke. Sith hutt chewbacca dantooine ponda. Windu kit hutt mon chewbacca endor hoth droid. Organa ackbar calamari hutt darth owen chewbacca. Jade anakin tatooine gonk ben wedge antilles lars. Jar secura moff jade darth. Yoda zabrak kenobi kessel amidala. Yavin fett yoda ventress vader. Cade ackbar maul hoth.</p>
            <p>Hoth alderaan ponda solo. Lobot skywalker tatooine jango. Mara jinn tatooine kessel skywalker moff. Ben palpatine alderaan zabrak sith endor skywalker utapau moff. Jawa wedge dooku ponda ventress wedge. Wedge sidious han kessel wampa moff binks mon. Hutt solo qui-gonn maul fett hutt padmé cade ackbar. Windu wicket cade endor r2-d2 mon skywalker amidala dagobah. Luke tatooine hutt moff darth dagobah. Darth moff darth luke. Sith luke calamari mace skywalker. Lando anakin fisto padmé wicket wampa yoda organa yavin.</p>
            <p>Twi&#8217;lek jango solo vader fisto obi-wan darth antilles. Yavin organa luke bothan leia skywalker bothan vader organa. Calrissian vader grievous mothma. Moff wedge ben mandalore organa hutt boba darth. Dantooine mace dantooine mothma solo lars owen organa droid. Windu qui-gonn luke antilles gonk. Solo skywalker lando grievous. Darth jinn kamino yavin sith calamari fisto ewok. Kit mara anakin darth secura jade jar twi&#8217;lek bothan. Bespin darth hutt ponda darth. Darth qui-gonn sidious lars sidious kessel.</p>
        </div>
    </div>
</div>

Answer 1

我尝试使用 .owl-item 类扩展块，而不是使用 .item 类扩展它们的子块。

1. 在脚本中添加the addClassActive: true option：

   在可见项目上添加“活动”类。适用于屏幕上任意数量的项目。

2. 从 CSS 中删除 .item:hover：

    .item:hover {
      width: calc(100% + 25%) !important;
      -webkit-transform: scale(1.4);
      -moz-transform: scale(1.4);
      -o-transform: scale(1.4);
      -ms-transform: scale(1.4);
      transform: scale(1.4);
      -webkit-transform-origin: left 0;
      -moz-transform-origin: left 0;
      -o-transform-origin: left 0;
      -ms-transform-origin: left 0;
      transform-origin: left 0;
      z-index: 10000;
    }

    .item:hover .tile_element .tile_subtitle {
      width: calc(100% + 25%) !important;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: left 0;
      -moz-transform-origin: left 0;
      -o-transform-origin: left 0;
      -ms-transform-origin: left 0;
      transform-origin: left 0;
      z-index: 10000;
      text-align: center;
    }

1. 改为添加此代码：

    .owl-item:hover {
      -webkit-transform: scale(1.2) !important;
         -moz-transform: scale(1.2) !important;
          -ms-transform: scale(1.2) !important;
           -o-transform: scale(1.2) !important;
              transform: scale(1.2) !important;
      -webkit-transform-origin: 100% 20% 0;
         -moz-transform-origin: 100% 20% 0;
          -ms-transform-origin: 100% 20% 0;
           -o-transform-origin: 100% 20% 0;
              transform-origin: 100% 20% 0;
    }

    .owl-item:first-child:hover,
    .owl-item:not(.active)+.owl-item.active:hover {
      -webkit-transform-origin: 0 20% 0;
         -moz-transform-origin: 0 20% 0;
          -ms-transform-origin: 0 20% 0;
           -o-transform-origin: 0 20% 0;
              transform-origin: 0 20% 0;
      position: relative;
      z-index: 100;
    }

请检查结果。是你想要达到的吗？

http://codepen.io/glebkema/pen/LkovRb

$(document).ready(function() {
  var carousel = $("#owl-demo");
  carousel.owlCarousel({
    navigation: true,
    navigationText: [
      "<i class='fa fa-arrow-left fa-3x'></i>",
      "<i class='fa fa-arrow-right fa-3x'></i>"
    ],
    lazyLoad: true,
    pagination: false,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true,
        loop: false
      }
    },
    addClassActive: true
  });

  $('.link').on('click', function(event) {
    var $this = $(this);
    if ($this.hasClass('clicked')) {
      $this.removeAttr('style').removeClass('clicked');
    } else {
      $this.css('background', '#7fc242').addClass('clicked');
    }
  });
});

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  padding: 10px;
  width: 100%;
  overflow-x: hidden;
}

a {
  transition: all 0.3s ease;
  text-decoration: none;
}

header {
  margin-bottom: 30px;
}

.navbar-brand {
  height: auto;
  width: 100%;
  text-align: center;
  padding: 0;
}

.navbar-brand h1 {
  margin-top: 0;
  margin-bottom: 0;
}

footer {
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
  margin-top: 30px;
}

footer p {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 400;
}

.owl-theme .owl-controls {
  margin-top: 10px;
  text-align: center;
}


/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div {
  display: inline-block;
  zoom: 1;
  display: inline;
  /*IE7 life-saver */
  margin: 5px;
  padding: 3px 10px;
  filter: Alpha(Opacity=50);
  /*IE7 fix*/
  opacity: 0.5;
}


/* Clickable class fix problem with hover on touch devices */


/* Use it for non-touch hover action */

.owl-theme .owl-controls.clickable .owl-buttons div:hover {
  filter: Alpha(Opacity=100);
  /*IE7 fix*/
  opacity: 1;
  text-decoration: none;
}


/* Styling Pagination*/

.owl-theme .owl-controls .owl-page {
  display: inline-block;
  zoom: 1;
  *display: inline;
  /*IE7 life-saver */
}

.owl-theme .owl-controls .owl-page span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 5px 7px;
  filter: Alpha(Opacity=50);
  /*IE7 fix*/
  opacity: 0.5;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  filter: Alpha(Opacity=100);
  /*IE7 fix*/
  opacity: 1;
}


/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers {
  height: auto;
  width: auto;
  padding: 2px 10px;
}


/* preloading images */


/*.owl-item.loading {
	min-height: 150px;
	background: url(AjaxLoader.gif) no-repeat center center
}*/

#owl-demo .owl-item > div img {
  display: block;
  width: 100%;
  height: auto;
}

#owl-demo .owl-item > div {
  text-align: center;
  padding: 0px;
  /*margin: 3px;
	border: 1px black;*/
}

.wrapper-with-margin {
  margin: 0px 50px;
}

.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
}

.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: -90px;
  top: calc(50vh - 160px);
  background-color: rgba(0, 0, 0, .2);
  padding: 20px;
  margin: 5px;
  color: rgba(255, 255, 255, .5) !important;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.owl-theme .owl-controls .owl-buttons .owl-prev:hover {
  background-color: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.owl-theme .owl-controls .owl-buttons .owl-next {
  right: -90px;
  top: calc(50vh - 160px);
  background-color: rgba(0, 0, 0, .2);
  padding: 20px;
  margin: 5px;
  color: rgba(255, 255, 255, .5) !important;
  border-radius: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.owl-theme .owl-controls .owl-buttons .owl-next:hover {
  background-color: rgba(0, 0, 0, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.owl-demo {
  position: relative;
  width: 100%;
  height: 100%;
}

.item {
  display: block;
  cursor: pointer;
  /*padding: 30px 0px;*/
  color: #FFF;
  height: 100vh;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  -ms-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  -webkit-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 13px 0px rgba(0, 0, 0, 0.75);
}

.owl-item:hover {
  -webkit-transform: scale(1.2) !important;
     -moz-transform: scale(1.2) !important;
      -ms-transform: scale(1.2) !important;
       -o-transform: scale(1.2) !important;
          transform: scale(1.2) !important;
  -webkit-transform-origin: 100% 20% 0;
     -moz-transform-origin: 100% 20% 0;
      -ms-transform-origin: 100% 20% 0;
       -o-transform-origin: 100% 20% 0;
          transform-origin: 100% 20% 0;
}
.owl-item:first-child:hover,
.owl-item:not(.active)+.owl-item.active:hover {
  -webkit-transform-origin: 0 20% 0;
     -moz-transform-origin: 0 20% 0;
      -ms-transform-origin: 0 20% 0;
       -o-transform-origin: 0 20% 0;
          transform-origin: 0 20% 0;
  position: relative;
  z-index: 100;
}

.tile_color {
  -webkit-transition: background-color 0.3s ease;
  -moz-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  -ms-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.item:hover .tile_color.tile_element {
  opacity: .7;
}

.tile_element {
  height: 100%;
  position: absolute;
  width: 100%;
}

.tile_image {
  background-size: cover;
  background-position: center center;
  margin: auto;
  -webkit-filter: grayscale(1);
  /* Old WebKit */
  filter: grayscale(1);
  height: 100%;
  position: absolute;
  width: 100%;
}

.tile_content {
  height: calc(50% + 5px);
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

.tile_icon {
  top: calc(25% - 15px);
  width: 100%;
  text-align: center;
  color: #ffffff;
  display: block;
  position: absolute;
  left: 0;
}

.tile_title {
  top: calc(50% + 0px);
  position: absolute;
  text-align: center;
  width: 100%;
  color: #ffffff;
  left: 0;
}

.tile_subtitle {
  bottom: 22px;
}

.tile_content i,
.tile_content div {
  position: absolute;
  text-align: center;
  width: 100%;
  color: #ffffff;
  left: 0;
}

.home h3:before {
  content: '';
  width: 25px;
  height: 2px;
  background-color: rgba(255, 255, 255, .7);
  display: block;
  margin: 10px auto;
}

html {
  font-family: Open Sans, Array, Array, Arial, sans-serif;
  font-size: 13;
}

body {
  background-color: #e8e8e8;
}

a .style-svg {
  width: 350px;
  height: auto;
  padding-top: 15px;
}

footer p {
  color: #777777;
  font-size: 10px;
}

footer p a {
  color: #c4c4c4;
}

footer p a:hover {
  color: #ffffff;
  text-decoration: none;
}

.home h2 {
  font-family: 'Herr Von Muellerhoff', serif;
  font-size: 38px;
  color: #ffffff;
  margin: 0;
  font-weight: 400;
  line-height: 38px;
  width: 100%;
  text-align: center;
  margin: 10px auto;
}

.home h3 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}

<link rel='stylesheet' id='bootstrap-min-css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='owl-style-css' href='//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css' type='text/css' media='all' />
<link rel='stylesheet' id='owl-theme-css' href='//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.css' type='text/css' media='all' />
<link rel='stylesheet' id='owl-transitions-css' href='//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.css' type='text/css' media='all' />
<link rel='stylesheet' id='acfgfs-enqueue-fonts-css' href='//fonts.googleapis.com/css?family=Herr+Von+Muellerhoff%7CRaleway%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7COpen+Sans%3A300%2C300italic%2C400%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic&#038;subset=latin-ext%2Clatin%2Cgreek%2Ccyrillic-ext%2Ccyrillic%2Cgreek-ext%2Cvietnamese&#038;ver=4.6'
  type='text/css' media='all' />

<body class="home">
  <div class="container">
    <div class="row">

      <div class="wrapper-with-margin">
        <div id="owl-demo" class="owl-carousel">
          <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/IMAG0286CROPPED-919x1024-919x1024.jpg);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(217,48,19);"></div>
            <div class="tile_content tile_element">
              <div class="tile_icon">
                <i class="fa fa-asterisk fa-4x"></i>
              </div>
              <div class="tile_title">
                <h2>About Me</h2>
              </div>
              <div class="tile_subtitle">
                <h3>Profile</h3>
              </div>
            </div>
            <div class="tile_element tile_effect"></div>
            <div id="Profile" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="background-color: rgb(238, 238, 238); position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
              <p><img src="http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/sharon-150x150.jpg" alt="sharon" width="150" height="150" class="alignleft size-thumbnail wp-image-52" />Lucas ipsum dolor sit amet skywalker moff padmé mon skywalker moff moff luuke binks jabba. Mon mustafar c-3p0 mustafar antilles calamari organa. Solo wedge moff gonk c-3p0 dantooine chewbacca darth. Lando darth coruscant kessel qui-gonn mara maul dantooine. Jabba organa solo skywalker hutt kenobi qui-gonn. Luuke vader darth binks alderaan ahsoka wicket antilles wedge. Chewbacca leia tusken raider organa calrissian. Thrawn baba solo moff. Windu darth kashyyyk hutt kashyyyk gamorrean maul. Skywalker kit moff wedge coruscant amidala.</p>
calamari fisto ewok. Kit mara anakin darth secura jade jar twi’lek bothan. Bespin darth hutt ponda darth. Darth qui-gonn sidious lars sidious kessel.</p>
            </div>
          </div>
          <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/resume-1024x731.jpg);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(243,189,0);"></div>
            <div class="tile_content tile_element">
              <div class="tile_icon">
                <i class="fa fa-bolt fa-4x"></i>
              </div>
              <div class="tile_title">
                <h2>My Skills</h2>
              </div>
              <div class="tile_subtitle">
                <h3>Resumé</h3>
              </div>
            </div>
            <div class="tile_element tile_effect"></div>
            <div id="Resumé" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
              <p>Lucas ipsum dolor sit amet skywalker moff padmé mon skywalker moff moff luuke binks jabba. Mon mustafar c-3p0 mustafar antilles calamari organa. Solo wedge moff gonk c-3p0 dantooine chewbacca darth. Lando darth coruscant kessel qui-gonn mara maul dantooine. Jabba organa solo skywalker hutt kenobi qui-gonn. Luuke vader darth binks alderaan ahsoka wicket antilles wedge. Chewbacca leia tusken raider organa calrissian. Thrawn baba solo moff. Windu darth kashyyyk hutt kashyyyk gamorrean maul. Skywalker kit moff wedge coruscant amidala.</p>
calamari fisto ewok. Kit mara anakin darth secura jade jar twi’lek bothan. Bespin darth hutt ponda darth. Darth qui-gonn sidious lars sidious kessel.</p>
            </div>
          </div>
          <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/105__.png);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(0,0,255);"></div>
            <div class="tile_content tile_element">
              <div class="tile_icon">
                <i class="fa fa-briefcase fa-4x"></i>
              </div>
              <div class="tile_title">
                <h2>My Work</h2>
              </div>
              <div class="tile_subtitle">
                <h3>Portfolio</h3>
              </div>
            </div>
            <div class="tile_element tile_effect"></div>
            <div id="Portfolio" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
              <p>Lucas ipsum dolor sit amet skywalker moff padmé mon skywalker moff moff luuke binks jabba. Mon mustafar c-3p0 mustafar antilles calamari organa. Solo wedge moff gonk c-3p0 dantooine chewbacca darth. Lando darth coruscant kessel qui-gonn mara maul dantooine. Jabba organa solo skywalker hutt kenobi qui-gonn. Luuke vader darth binks alderaan ahsoka wicket antilles wedge. Chewbacca leia tusken raider organa calrissian. Thrawn baba solo moff. Windu darth kashyyyk hutt kashyyyk gamorrean maul. Skywalker kit moff wedge coruscant amidala.</p>
calamari fisto ewok. Kit mara anakin darth secura jade jar twi’lek bothan. Bespin darth hutt ponda darth. Darth qui-gonn sidious lars sidious kessel.</p>
            </div>
          </div>
          <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/android-app-developer-Specialist11-1024x576.jpg);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(86,211,83);"></div>
            <div class="tile_content tile_element">
              <div class="tile_icon">
                <i class="fa fa-user fa-4x"></i>
              </div>
              <div class="tile_title">
                <h2>My Clients</h2>
              </div>
              <div class="tile_subtitle">
                <h3>Testimonials</h3>
              </div>
            </div>
            <div class="tile_element tile_effect"></div>
            <div id="Testimonials" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
              <p>Lucas ipsum dolor sit amet skywalker moff padmé mon skywalker moff moff luuke binks jabba. Mon mustafar c-3p0 mustafar antilles calamari organa. Solo wedge moff gonk c-3p0 dantooine chewbacca darth. Lando darth coruscant kessel qui-gonn mara maul dantooine. Jabba organa solo skywalker hutt kenobi qui-gonn. Luuke vader darth binks alderaan ahsoka wicket antilles wedge. Chewbacca leia tusken raider organa calrissian. Thrawn baba solo moff. Windu darth kashyyyk hutt kashyyyk gamorrean maul. Skywalker kit moff wedge coruscant amidala.</p>
calamari fisto ewok. Kit mara anakin darth secura jade jar twi’lek bothan. Bespin darth hutt ponda darth. Darth qui-gonn sidious lars sidious kessel.</p>
            </div>
          </div>
          <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/Carroll-Creek-Park-Abloom-Frederick-MD-1024x768.jpg);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(102,102,102);"></div>
            <div class="tile_content tile_element">
              <div class="tile_icon">
                <i class="fa fa-envelope fa-4x"></i>
              </div>
              <div class="tile_title">
                <h2>Get In Touch</h2>
              </div>
              <div class="tile_subtitle">
                <h3>Contact</h3>
              </div>
            </div>
            <div class="tile_element tile_effect"></div>
            <div id="Contact" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
              <p>Lucas ipsum dolor sit amet skywalker moff padmé mon skywalker moff moff luuke binks jabba. Mon mustafar c-3p0 mustafar antilles calamari organa. Solo wedge moff gonk c-3p0 dantooine chewbacca darth. Lando darth coruscant kessel qui-gonn mara maul dantooine. Jabba organa solo skywalker hutt kenobi qui-gonn. Luuke vader darth binks alderaan ahsoka wicket antilles wedge. Chewbacca leia tusken raider organa calrissian. Thrawn baba solo moff. Windu darth kashyyyk hutt kashyyyk gamorrean maul. Skywalker kit moff wedge coruscant amidala.</p>
calamari fisto ewok. Kit mara anakin darth secura jade jar twi’lek bothan. Bespin darth hutt ponda darth. Darth qui-gonn sidious lars sidious kessel.</p>
            </div>
          </div>

          <div class="item owl-lazy link">
            <div class="tile_image tile_element" style="background-image: url(http://ccharacter.themedev.thepixelpixie.com/wp-c0nt3nt/uploads/2016/08/Call-Center-1024x683.jpg);"></div>
            <div class="tile_color tile_element" style="background-color: rgb(155,89,182);"></div>
            <div class="tile_content tile_element">
              <div class="tile_icon">
                <i class="fa fa-cogs fa-4x"></i>
              </div>
              <div class="tile_title">
                <h2>Service</h2>
              </div>
              <div class="tile_subtitle">
                <h3>Login / Account</h3>
              </div>
            </div>
            <div class="tile_element tile_effect"></div>
            <div id="Login / Account" class="with_fading mCustomScrollbar mCS-autoHide mCS_no_scrollbar" style="position: relative; overflow: visible; top: 0px; width: 0px; display: none; left: -100%; min-height: 400px;">
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- End Row -->

  </div>
  <!-- end container-fluid -->

  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js'></script>
  <script type='text/javascript' src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
</body>