CSS format carousel issue - html

Question

I'm woring in this carousel, i'm using bootstram, and OWL Carousel : http://owlgraphic.com/owlcarousel
what i need to do is, make the clicked button taller, and in front of the image, like in the attached images.
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"><h1>Un nuevo amanecer</h1></div>
<div class="item"><h1>Conoce Expo Digital</h1></div>
<div class="item"><h1>Expo Priority</h1></div>
<div class="item"><h1>Expo Gold</h1></div>
<div class="item"><h1>Expo at work</h1></div>
</div>
</div>
</div>
</div>
</div>
And the 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;
}
What i need is to get this button taller and in fron of the main image.
that's why i'm coming here, because i had not found a solution in other palce.
This is the way i'm doing it:
and this is the way i need it working.
So i'm trying a lot of cases, but i still don't found the way to do it.
thank you for your help!

Answer 1

In css3 you have the scale propertie :
.item:hover{
transform: scale(2);
}
will make the hovered item 2 times bigger.
.item a:active{
transform: scale(2);
}
Feel free to ask if needed