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格式轉盤問題

回答

相關問題