>

각 이미지의 맨 아래에 텍스트 오버레이가있는 정렬되지 않은 이미지 목록이 있습니다. 텍스트 오버레이는 배경색이 다른 인라인 블록입니다.

먼저 필요없는 배경색 사이에 공백이 생깁니다. ✔️

둘째, 왼쪽 인라인 블록의 너비는 고정되어 있고 오른쪽은 나머지 너비를 가려야합니다. ✔️

둘째로, 두 번째 블록에는 숨겨져 가리키면 표시되어야하는 다른 요소가 있어야합니다

마지막으로 두 블록의 높이가 변경 될 때 두 블록의 높이가 항상 같기를 원합니다

수정 단락 div가 호버에 표시되어야합니다. 또한 인라인 블록의 높이가 변경 될 때마다 높이가 나오기를 원합니다.

지금까지 내가 가지고있는 것

.slideList {
  width: 100%;
}
.slideList li {
  position:relative; 
}
.slideList .service-highlight {
  position: absolute;
  color: white;
  bottom: 0;
  left: 0; 
  right:0
}
.slideList .service-highlight p {
  display: inline-block;
  color: white;
  font-size: 18px;
  font-weight: bold;
}
.slideList .service-highlight .services-box{
  text-align: center;
  background-color: #003768;
  width: 200px;
  font-weight: bold;
  float: left;
}
.slideList .service-highlight .services-detail{
  background-color: #0088ff;
  width:calc(100% - 200px);
  float: left;
  padding-left: 5px;
}

.slideList .hide-description {
  display: none;
  font-weight:normal;
}
.slideList .hide-description p {
  font-weight:normal;
  padding-top: 10px 5px 10px;
}
.services-detail:hover + .hide-description {
  display: block;
  position: absolute;
 }
.clearFloat {
  clear: both;
}

<ul class="slideList">
        <li data-transition="fade">
            <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
 
             <div class="service-highlight">
                <p class="services-box">SOME SERVICE:</p>
                <div class="services-detail">
                    <p>Some headline</p>
                    <div class="hide-description">
                        <p>Some text that appears here. Text describes some service I intend to achieve. This may or may not take up to three lines maybe two </p>
                    </div>
                </div>
            </div>
        </li>
<ul>


  • 답변 # 1

    1&2) 공백은 .services-box 를 떠 다니면 간단히 제거 할 수 있습니다.  & .service-highlight  왼쪽에 고정 너비를 .service-box 로 설정하십시오.   .service-highlight 에 백분율 너비를 제공하십시오 .

    3) 이것을 달성하려면 :hover 를 사용해야합니다 . 그러나 마우스를 가져 가면 숨겨진 상자가 나타나고 마우스가 마우스 위에 있으므로 마우스가 새 상자에 있으므로 :hover 를 잃기 때문에 동일한 줄에 넣을 수 없습니다.  효과가 원래 상태로 돌아가므로 깜박입니다. 이 문제를 피하려면 새 표시 상자를 위에 두십시오.

    도움이 되었기를 바랍니다!

    .slideList {
      width: 100%;
    }
    .slideList li {
      position:relative; 
    }
    .slideList .service-highlight {
      position: absolute;
      color: white;
      bottom: 0;
      left: 0; 
      right:0
    }
    .slideList .service-highlight p {
      display: inline-block;
      color: white;
      font-size: 18px;
      font-weight: bold;
    }
    .slideList .service-highlight .services-box{
      text-align: center;
      background-color: #003768;
      width: 200px;
      font-weight: bold;
      float: left;
    }
    .slideList .service-highlight .services-detail{
      background-color: #0088ff;
      width:calc(100% - 202px);
      float: left;
    }
    
    .slideList .hide-description {
      display: none;
     }
     
     
     .services-detail:hover + .hide-description {
      display: block;
      position: absolute;
      bottom: 50px;
     }
     
     .clearFloat {
      clear: both;
     }
    
    
    <ul class="slideList">
            <li data-transition="fade">
                <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" >
     
                <div class="service-highlight">
                    <p class="services-box">SOME SERVICES:</p>
                    <p class="services-detail">Service headline detail</p>
                    
                    <div class="hide-description">
    <!-- Div should be a continuation of .services-detail -->
                        <p>A more detailed description of services. This should appear here. In about 3 sentences and at least three lines long</p>
                    </div>
                    <div class="clearFloat"></div>
                </div>
            </li>
            
    <ul>
    
    

    업데이트 2 :

    연결 한 참조에서 텍스트가 아닌 상자 위에 마우스를 놓았습니다. 마크 업 방식을 변경했습니다. 지금 살펴보세요 :

    * {
      margin: 0;
      padding: 0;
    }
    .slideList {
      width: 100%;
      height: 550px;
      background-image: url("https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    .slideList ul {
      list-style: none;
    }
    .service-highlight {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    .services-box {
      text-align: center;
      background-color: #003768;
      width: 200px;
      font-weight: bold;
      float: left;
    }
    .services-detail {
      background-color: #0088ff;
      width: calc(100% - 200px);
      float: left;
    }
    .hide-description {
      display: none;
    }
    .slideList:hover .hide-description {
      display: block;
      position: absolute;
      bottom: 0px;
      background-color: #0088ff;
     }
    .clearFloat {
      clear: both;
    }
    
    
    <ul class="slideList">
      <li data-transition="fade">
        <div class="service-highlight">
          <p class="services-box">SOME SERVICES:</p>
          <p class="services-detail">Service headline detail</p>
          
          <div class="hide-description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam animi accusamus officia accusantium quaerat distinctio, omnis neque adipisci! Rerum nemo vitae necessitatibus autem fugit ipsam in nam asperiores. Eius, vitae.
        </div>
        <div class="clearFloat"></div>
        </div>
      </li>
            
    <ul>
    
    

관련 자료

  • 이전 asterisk - 통화중인 기기의 대기 상태를 확인합니다
  • 다음 java - 블루투스 SPP 신비한 버퍼 오버 플로우, 안드로이드/BlueGiga WT12, 잠재적 인 흐름 제어 문제?