아코디언 패널 왜곡

Question

헤더 오버레이가 그대로 유지되도록 래퍼에서 div를 기울이거나 회전 시키려면 어떻게해야합니까? 완벽 작동하는 서버에서 ... 호버 코드 펜에서 작동하지 않는 이유 http://jsfiddle.net/s052dksk/

알고하지 마십시오 : 여기

는 코드입니다.

<div class="top-section"> 
    <div class="single-column" id='column-n1'> 
     <div class="header-overlay"> 
      <div class="header-overlay-inner"> 
       <h2><a href="#">DIV 1</a></h2> 

      </div> 
     </div> 
    </div> 
    <div class="single-column" id='column-n2'> 
     <div class="header-overlay"> 
      <div class="header-overlay-inner"> 
       <h2><a href="#">DIV 2</a></h2> 

      </div> 
     </div> 
    </div> 
    <div class="single-column" id='column-n3'> 
     <div class="header-overlay"> 
      <div class="header-overlay-inner"> 
       <h2><a href="#">DIV 3</a></h2> 

      </div> 
     </div> 
    </div> 
    <div class="single-column" id='column-n4'> 
     <div class="header-overlay"> 
      <div class="header-overlay-inner"> 
       <h2><a href="#">DIV 4</a></h2> 
      </div>  
     </div> 
    </div> 
</div> 

그리고 CSS :

.top-section .single-column { 
width: 25%; 
height: 350px; 
background-color: #FFF; 
float: left; 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 
position: relative; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
.top-section .single-column .header-overlay { 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 140px; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; 
    background-color: rgba(0, 0, 0, 0.3); } 
.top-section .single-column .header-overlay h2 { 
    text-align: center; 
    margin-top: 32px; 
    margin-bottom: 0; } 
    .top-section .single-column .header-overlay h2 a { 
    color: white; 
    font-size: 60px; 
    font-family: Prata; 
    transition: all 300ms ease-in-out; 
    -o-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    -webkit-transition: all 300ms ease-in-out; } 
    .top-section .single-column .header-overlay h2 a:hover { 
    color: #a3d070; } 
.top-section .single-column .header-overlay p { 
    font-family: "Lato"; 
    font-weight: 100; 
    font-size: 20px; 
    text-align: center; 
    color: white; 
    text-transform: uppercase; } 
.top-section .single-column .header-overlay-inner { 
position: absolute; 
bottom: 20px; 
left: 0; 
right: 0; } 
.top-section .wide-column { 
    width: 40%; 
    transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
.top-section .reduced-width { 
width: 20%; 
transition: all 300ms ease-in-out; 
-o-transition: all 300ms ease-in-out; 
-moz-transition: all 300ms ease-in-out; 
-webkit-transition: all 300ms ease-in-out; } 
.top-section #column-n1 { 
background-color: green; 
border-top: 4px solid #4e90c4; 
border-bottom: 4px solid #4e90c4; } 
.top-section #column-n2 { 
background-color:red; 
border-top: 4px solid #a3d070; 
border-bottom: 4px solid #a3d070; } 
.top-section #column-n3 { 
background-color:black; 
border-top: 4px solid #f4c069; 
border-bottom: 4px solid #f4c069; } 
.top-section #column-n4 { 
background-color: yellow; 
border-top: 4px solid #ff6771; 
border-bottom: 4px solid #ff6771; } 

.inner-top-section .single-column { 
height: 148px; } 
.inner-top-section .single-column h2 a { 
font-size: 50px; } 
.inner-top-section .single-column p { 
font-size: 15px; } 
.inner-top-section .single-column .header-overlay-inner { 
bottom: 15px; } 

그리고 JS : 나는 경우 JQuery와 :

로드되지 않았기 때문에

function hoverAnimation(){ 
     $('.single-column').hover(function(){ 
      $(this).siblings().children('.header-overlay').toggleClass('full-height'); 
      $(this).toggleClass('wide-column'); 
      $(this).siblings().toggleClass('reduced-width'); 
     }); 
    } 
    hoverAnimation(); 

Answer 1

그것은 바이올린에서 작동하지 않습니다 문제를 올바르게 이해했다면 <h2></h2> 텍스트를 두 번째 줄에 놓기를 원하지 않을 것입니다.

것을 방지하기 위해, 당신은 그것에 폭을 추가 할 수 있습니다 http://jsfiddle.net/s052dksk/1/

.top-section .single-column .header-overlay h2 {width:117px;}