響應式水平手風琴

Question

我正在研究具有帶文字疊加圖像的響應式水平手風琴。我想要做的是對每個圖像的左側每個圖像顯示的標題，使文本將無需用戶不必在它懸停，像這樣顯示：

當用戶懸停在圖片上，我希望它留在左側，並顯示說明。我的問題是讓標題顯示在左側。我可以看到它在懸停時動畫;它會從-90deg 0

CSS/HTML：

.accordion { 
 
    width: 100%; 
 
    max-width: 2100px; 
 
    height: 350px; 
 
    overflow: hidden; 
 
    margin: 50px auto; 
 
} 
 

 
.accordion ul { 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.accordion ul li { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    position: relative; 
 
    width: 16.666%; 
 
    height: 350px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    transition: all 500ms ease; 
 
} 
 

 
.accordion ul li div a h2 { 
 
    display: block; 
 
    overflow: auto; 
 
    -ms-transform: rotate(270deg); /* IE 9 */ 
 
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(270deg); 
 
    background-color: rgba(255,255,255,.5); 
 
    width: 100%; 
 
} 
 

 
.accordion ul li div a { 
 
    display: block; 
 
    height: 350px; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 3; 
 
    vertical-align: bottom; 
 
    padding: 15px 20px; 
 
    box-sizing: border-box; 
 
    color: #000; 
 
    text-decoration: none; 
 
    transition: all 200ms ease; 
 
} 
 

 
.accordion ul li div a * { 
 
    opacity: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 5; 
 
    overflow: fill; 
 
    -webkit-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
    -webkit-transition: all 400ms ease; 
 
    transition: all 400ms ease; 
 
    background-color: rgba(255,255,255,.5); 
 
    padding: 5px; 
 
} 
 

 
.accordion ul li div a h2 { 
 
    text-overflow: clip; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
    margin-bottom: 2px; 
 
    top: 60px; 
 
} 
 

 
.accordion ul li div a p { 
 
    top: 80px; 
 
    font-size: 14px; 
 
    height: 100px; 
 
} 
 

 
.accordion ul li:nth-child(1) { background-image: url("http://placehold.it/1350x350"); } 
 

 
.accordion ul li:nth-child(2) { background-image: url("http://placehold.it/1350x350"); } 
 

 
.accordion ul li:nth-child(3) { background-image: url("http://placehold.it/1350x350"); } 
 

 
.accordion ul li:nth-child(4) { background-image: url("http://placehold.it/1350x350"); } 
 
.accordion ul:hover li { width: 8%; } 
 

 
.accordion ul:hover li:hover { width: 60%; } 
 

 
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); } 
 

 
.accordion ul:hover li:hover a * { 
 
    opacity: 1; 
 
    -webkit-transform: translateX(0); 
 
    transform: translateX(0); 
 
} 
 
@media screen and (max-width: 600px) { 
 
    
 
    body { margin: 0; } 
 
    
 
    .accordion { height: auto; } 
 
    
 
    .accordion ul li, 
 
    .accordion ul li:hover, 
 
    .accordion ul:hover li, 
 
    .accordion ul:hover li:hover { 
 
    position: relative; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    -webkit-transition: none; 
 
    transition: none; 
 
    } 
 
}

<div class="accordion w3-center"> 
 
    <ul> 
 
    <li> 
 
     <div> <a href="#"> 
 
     <h2>HEADER</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> 
 
     <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> </div> 
 
    </li> 
 
    <li> 
 
     <div> <a href="#"> 
 
     <h2>HEADER</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> 
 
     <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> </div> 
 
    </li> 
 
    <li> 
 
     <div> <a href="#"> 
 
     <h2>HEADER</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> 
 
     <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> </div> 
 
    </li> 
 
    <li> 
 
     <div> <a href="#"> 
 
     <h2>HEADER</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> 
 
     <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> </div> 
 
    </li> 
 
    </ul> 
 
</div>

典筆： http://codepen.io/xxdash/pen/pPrwBw

Answer 1

首先，讓我一個普遍的選擇器的使用說明，其在CSS中是*匹配任何元素類型。如果它不是簡單選擇器的唯一組件，則可以隱含（並因此省略）。下面是上例中的是相同的：

*.module { 
    display: block; 
} 
.module { 
    display: block; 
} 

在我看來，不建議這樣做，除非你想重置所有元素，使用通用的CSS。

我已經看到你的代碼，並審查並發現在後代顯示方法有點複雜的編碼。例如，您可以像我的代碼中那樣爲您的標題元素使用相鄰的兄弟選擇器。

.accordion ul li div + h2 { 
    your declaration 
} 

我已刪除h2元素這是它迫使與懸停情況下進行改造定位元素的一個孩子。我已經用span元素包裝了h2元素，並將它的方向轉換爲垂直位置，從底部和左側進行負向定位，就像旋轉元素時的角度一樣，元素的邊緣也旋轉留下間隙，因此我們需要修復與負面/位置邊際。

這裏是修改後的代碼。 希望這是你正在尋找。

.accordion { 
 
    width: 100%; 
 
    max-width: 1000px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 

 
.accordion ul { 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.accordion ul li { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    position: relative; 
 
    width: 16.666%; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    transition: all 500ms ease; 
 
} 
 

 
.accordion ul li div { 
 
    position: relative; 
 
} 
 

 
.accordion ul li div span { 
 
    background-color: rgba(255, 0, 0, .5); 
 
    font-size: 20px; 
 
    line-height: 34px; 
 
    font-weight: 300; 
 
    position: absolute; 
 
    display: block; 
 
    width: 300px; 
 
    height: 30px; 
 
    -webkit-transform: rotate(-90deg) translateX(-50%) translateY(-150px); 
 
    -moz-transform: rotate(-90deg) translateX(-50%) translateY(-150px); 
 
    -ms-transform: rotate(-90deg) translateX(-50%) translateY(-150px); 
 
    transform: rotate(-90deg) translateX(-50%) translateY(-150px); 
 
    left: 15px; 
 
    top: -15px; 
 
    white-space: nowrap; 
 
    z-index: 10000; 
 
    cursor: default !important; 
 
} 
 

 
.accordion h2 { 
 
    font-size: 20px; 
 
    margin: 0; 
 
} 
 

 
.accordion ul li div a { 
 
    display: block; 
 
    height: 300px; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 3; 
 
    vertical-align: bottom; 
 
    padding: 15px 20px; 
 
    box-sizing: border-box; 
 
    color: #000; 
 
    text-decoration: none; 
 
    transition: all 200ms ease; 
 
} 
 

 
.accordion ul li div a * { 
 
    opacity: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 5; 
 
    overflow: fill; 
 
    -webkit-transform: translateX(-20px); 
 
    transform: translateX(-20px); 
 
    -webkit-transition: all 400ms ease; 
 
    transition: all 400ms ease; 
 
    background-color: rgba(255, 255, 255, .5); 
 
    padding: 0px; 
 
} 
 

 
.accordion ul li div a p { 
 
    top: 0; 
 
    font-size: 14px; 
 
} 
 

 
.accordion ul li:nth-child(1) { 
 
    background-image: url("http://placehold.it/1350x350"); 
 
} 
 

 
.accordion ul li:nth-child(2) { 
 
    background-image: url("http://placehold.it/1350x350"); 
 
} 
 

 
.accordion ul li:nth-child(3) { 
 
    background-image: url("http://placehold.it/1350x350"); 
 
} 
 

 
.accordion ul li:nth-child(4) { 
 
    background-image: url("http://placehold.it/1350x350"); 
 
} 
 

 
.accordion ul:hover li { 
 
    width: 8%; 
 
} 
 

 
.accordion ul:hover li:hover { 
 
    width: 60%; 
 
} 
 

 
.accordion ul:hover li:hover a { 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.accordion ul:hover li:hover a * { 
 
    opacity: 1; 
 
    -webkit-transform: translateX(0); 
 
    transform: translateX(0); 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    body { 
 
    margin: 0; 
 
    } 
 
    .accordion ul li, 
 
    .accordion ul li:hover, 
 
    .accordion ul:hover li, 
 
    .accordion ul:hover li:hover { 
 
    position: relative; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    -webkit-transition: none; 
 
    transition: none; 
 
    } 
 
}

<div class="accordion w3-center"> 
 
    <ul> 
 
    <li> 
 
     <div><span><h2>HEADER With Longer Text</h2></span> 
 
     <a href="#"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo 
 
      libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, 
 
      a scelerisque purus accumsan sit amet.<br> 
 
      <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div><span><h2>HEADER with longer text</h2></span> 
 
     <a href="#"> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo 
 
      libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, 
 
      a scelerisque purus accumsan sit amet.<br> 
 
      <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div><span><h2>HEADER</h2></span> 
 
     <a href="#"> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo 
 
      libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, 
 
      a scelerisque purus accumsan sit amet.<br> 
 
      <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div><span><h2>HEADER</h2></span> 
 
     <a href="#"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo 
 
      libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, 
 
      a scelerisque purus accumsan sit amet.<br> 
 
      <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> 
 
     </a> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>