이미지 위의 Zurb Foundation 반응 형 텍스트

Question

당신은 모두 위대한 일을하기를 바랍니다.

저는 zurb 기초가 처음인데 반응 프레임 워크와 디자인의 가능성을 즐기고 있습니다.

비록 zurb이 멋지긴하지만, 나는이 디자인을 만드는 데 집착하고있다.

기본적으로 내가 뭘하려고하면 "바"ID의 일부이며 그것도 크기 변경하지만 위치의 숙박하는 resposive 텍스트를하는 것입니다.

현재 "small-block-grid-5 span"텍스트는 자유롭게 움직입니다.

나는 당신의 참조를 위해 jsFiddle을 수행하고 코드의 맨 아래에 내가 노력하고 최종 모습 달성하기 위해 무엇을 제공하고 있습니다. http://jsfiddle.net/mrzoogle/pmYVQ/2/

HTML

<div class="row"> 
    <div class="large-8 columns"> 
     <h3>Lorem ipsum</h3> 

     <div class="row"> 
      <div class="large-12 columns"> 
       <div class="panel"> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <h1><a href="#"><img id="mn-image" src="http://www.mediafire.com/convkey/df9e/0a3gam4mjjf2e31bg.jpg?size_id=5" alt="testimage"> </a></h1> 

        <div class="img-wrap"> 
         <h1 style="margin-bottom:-15px;"><a href="#"><img id="bar" src="http://www.mediafire.com/convkey/b77f/ouskaxv6jo2c925bg.jpg?size_id=5" alt="testbar"/></a></h1> 

         <ul class="small-block-grid-5"> 
          <li><span class="placeholder">Hi</span><strong>Text1</strong> 

          </li> 
          <li><span class="placeholder">HiHi</span><strong>Test2</strong> 

          </li> 
          <li><span class="placeholder">Hi</span><strong>Test3Test3</strong> 

          </li> 
         </ul> 
         <img src="http://www.mediafire.com/convkey/9690/6j1vy7zs7h5qibobg.jpg?size_id=2"> 
        </div> 
        <h1>Final Result</h1> 
        <img src="http://www.mediafire.com/convkey/6e43/063qj9wij0cd0babg.jpg?size_id=6"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.panel h1{ 
    width: 100%; 
} 

.img-wrap h1{ 
    width: 100%; 
} 

.img-wrap { 
    position: relative; 
    width: 100%; 
    img { 
     position: relative; 
     bottom: 40px; 
    } 
    ul { 
     position: absolute; 
     top: -40px; 
     left: 0px; 
     width: 100%; 
    } 
    ul span { 
     color: white; 
     font: bold 20px/45px helvetica, Sans-Serif; 
     letter-spacing: -1px; 
    } 
} 
.small-block-grid-5 strong { 
    display: block; 
    font-size:23px; 
    line-height:52px; 
} 
.small-block-grid-5 li { 
    text-align: center; 
} 

시간에 대한

덕분에 새로운 뭔가를 배울 기대!

친절 감사, Z.

Answer 1

나는 당신이 일할 수있는 무언가를 조롱했습니다.

내가 CSS3의 그라데이션 기능을 사용하고이를 지원하지 않는 브라우저를위한 단색으로 폴백 것이다 당신의 디자인을 복제합니다.

그러면 왼쪽으로 떠 다니고 1px 오른쪽 테두리를 추가하기 만하면됩니다.

나는 마지막 보터를 제거하는 것에 대해 신경 쓰지 않았지만, n 번째 선언으로 할 수 있습니다.

다음은 빠른 코드 펜입니다. - http://codepen.io/justincavery/full/qdokp