CSS格式转盘问题

我回环在这个旋转木马，我使用bootstram和OWL旋转木马：http://owlgraphic.com/owlcarousel CSS格式转盘问题

我需要做的是，让点击按钮高，并在图像的前面，就像在附带的图像中一样。

HTML

<!-- owl carousol start --> 
<div id="demo"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 


       <div id="sync1" class="owl-carousel"> 
        <div class="item"> 
         <h1>Atentos, despiertos, <br/> llenos de energía</h1> 
         <img src="images/slider.png"/> 
        </div> 
        <div class="item"> 
         <h1>Atentos, despiertos, <br/> llenos de energía</h1> 
         <img src="images/slider.png"/></div> 
        <div class="item"> 
         <h1>Atentos, despiertos, <br/> llenos de energía</h1> 
         <img src="images/slider.png"/></div> 
        <div class="item"> 
         <h1>Atentos, despiertos, <br/> llenos de energía</h1> 
         <img src="images/slider.png"/></div> 
        <div class="item"> 
         <h1>Atentos, despiertos, <br/> llenos de energía</h1> 
         <img src="images/slider.png"/></div> 

       </div> 

       <div id="sync2" class="owl-carousel"> 
        <div class="item"><a href="#"><h1>Un nuevo amanecer</h1></a></div> 
        <div class="item"><a href="#"><h1>Conoce Expo Digital</h1></a></div> 
        <div class="item"><a href="#"><h1>Expo Priority</h1></a></div> 
        <div class="item"><a href="#"><h1>Expo Gold</h1></a></div> 
        <div class="item"><h1>Expo at work</h1></div> 
       </div> 


      </div> 

     </div> 

    </div> 

</div>

而CSS

#sync1 .item{ 
    background: #0c83e7; 
    padding: 0px 0px; 
    margin: 0px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 



} 
#sync2 .item{ 
    background: #fff; 
    padding: 10px 0px; 
    margin: 0px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 
    cursor: pointer; 
    border-radius:0px; 
    margin-left:-5px; 
    border-left:1px solid #91c04e; 

    border: 1px solid red; 

} 
#sync2 .item:nth-child(6){ 
    border:0px; 
} 
#sync2 .item h1{ 
    font-size: 18px; 
    font-family: HelveticaNeueLight; 
    color:#9ac55d ; 
} 
#sync2 .synced .item{ 
    background: #9ac55d; 
    color: #fff; 
} 
#sync2 .synced .item h1{ 
    color: #fff; 
    font-family: HelveticaNeueLight; 
} 
#sync1 .item h1{ 

    font-family: HelveticaNeueLight; 
    font-style: italic; 
    position: absolute; 
    width: 98%; 
    text-align: right; 
    font-size: 48px; 
} 
#sync1 .item img{ 

    width: 100%; 




} 

.owl-item .item img{ 
    width:100%; 
    overflow:hidden; 

} 

.owl-theme .owl-controls .owl-buttons div{ 
    display:none; 


} 


.owl-wrapper{ 
    width:1000px; 


} 


.owl-theme .owl-controls{ 
    margin:0px; 
} 
#sync2{ 

    z-index:9999999999999; 
    margin-top:0px; 
} 
#sync2 .synced .item{ 

    color:#1c6f42; 
    border-right:1px solid #91c04e; 

    height: 55px; 
    margin: -10px 0px 0px 0px; 
    z-index: 99999999; 
} 

#sync2 .item{ 

    color:#91c04e; 
    height:45px; 

} 

#demo .full_width{ 

    max-width:100%; 
    overflow:hidden; 

} 

#sync2 .item a:active{ 

    color:red; 
    height:55px; 
    background-color: white; 
    margin: 10px 1px 1px 1px; 
    z-index: 9999999; 

}

我需要做的是让这个按钮更高，在主图像的弗朗。这就是为什么我要来这里，因为我没有找到其他方面的解决方案。

这是我做的方式：

，这是我需要它的工作方式。

所以我想很多的情况下，但我还是不发现这样做的方式。

谢谢你的帮助！

来源

2016-02-12 bjesua

CSS3中你有规模propertie：

.item:hover{ 
    transform: scale(2); 
}

将使悬停项目2倍大。

.item a:active{ 
     transform: scale(2); 
    }

如果需要

来源

2016-02-12 23:48:57 Hugz

非常感谢你随意问，但它好好尝试解决该问题 – bjesua

所以我没有得到你所需要的。 – Hugz

谢谢，我需要让按钮选得更大，就像在第二张图片中那样，按钮因为被点击而变大了，但那只是psd。在我想要做的第一个图像中，但我只是移动这些字母，我不会移动按钮或使它更高一点！ – bjesua

CSS格式转盘问题

回答

相关问题