Question

如何倾斜或旋转包装中的div，以使标题叠加层保持不变？

不知道为什么悬停在代码笔中不起作用......在服务器上它完美无缺。

<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：

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

它不适用于小提琴，因为你没有加载jquery：）

如果我正确理解您的问题，您不希望<h2></h2>文字放到第二行。

为了防止这种情况，您可以为其添加宽度：http://jsfiddle.net/s052dksk/1/

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

手风琴面板歪斜

1 个答案: