CSS变换高于周围的div

时间：2016-08-20 18:34:37

标签： css css3 css-animations css-transforms owl-carousel

我试图在悬停时扩展猫头鹰轮播项目（并最终在点击时显示内容）。它主要在那里，但我需要扩展每个项目，而不是打扰他们。我已经看到类似的问题使用位置相对和＆amp;各种周围div的绝对值，但到目前为止设置项目为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>

1 个答案:

答案 0 :(得分：0)

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

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

      

    添加＆＃34;有效＆＃34;可见项目的课程。适用于屏幕上任意数量的项目。

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

    3.  
        .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. 改为添加此代码：
      2.  
          .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

      ＆＃13;
      ＆＃13; 
      $(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');
    }
  });
});
      ＆＃13; 
      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;
}
      ＆＃13; 
      <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>
      ＆＃13;
      ＆＃13;
      ＆＃13;

相关问题
最新问题