CSS - 변형 : 이미지의 크기가 겹치고 올바르게 크기 조절되지 않음

내 사이트의 특정 페이지에 대한 변형 : 축척 전환을 다시 만들려고하고 있지만 제대로 작동하지 않습니다.이 코드 스 니펫에서 볼 수 있듯이 (전체 페이지보기) - 매끄럽지 않고 언더 랩핑 및 언더 랩핑 이미지. 나는 각각의 이미지, 공중 선회 할 때, 겹치는 이미지에 남아 텍스트 다른 이상과 정치가 필요 CSS - 변형 : 이미지의 크기가 겹치고 올바르게 크기 조절되지 않음

/* Partners page */ 
 

 

 
.masonry { /* Masonry container */ 
 
    column-count: 5; 
 
    
 
} 
 

 

 

 

 
.brick img { 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
body { 
 
    
 
    font-family: 'Gotham-Light'; 
 
    margin: 0; 
 
    background: #fff; 
 
    font-size: 25px; 
 
} 
 

 
.wrapper { 
 
    width: 80%; 
 
    margin: 3em auto; 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
    vertical-align: bottom; 
 
} 
 

 
.brick { 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 

 
/* Image words/text hover effect */ 
 

 
.brick { 
 
    
 
    opacity: .99; 
 
    position: relative; 
 
    
 
} 
 

 

 

 

 
.wrapper .brick .details { 
 
    padding: 0px 20px 20px 20px; 
 
    color: #fff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 3; 
 
    opacity: 0; 
 
    transition: .7s ease; 
 
    \t background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0)); 
 
} 
 

 
.brick:hover { 
 
\t -webkit-transform: scale(1.5); 
 
\t -webkit-transition: transform 0.5s ease-in-out; 
 
} 
 

 
.brick:hover .details { 
 
    opacity: 1; 
 
} 
 

 

 
.brick .details span { 
 
    
 
    opacity: 0; 
 
    top: 0; /* 100px */ 
 
    -webkit-transition-property: top, opacity; 
 
    transition-property: top, opacity; 
 
    -webkit-transition-duration: 0.3s; 
 
      transition-duration: 0.3s; 
 
    -webkit-transition-delay: 0s; 
 
      transition-delay: 0s; 
 
} 
 

 
.brick .details #title { 
 
    line-height: 1.5; 
 
    font-weight: 500; 
 
    font-size: 18px; 
 
} 
 

 
.brick .details #info { 
 
    line-height: 1.2; 
 
    font-weight: 500; 
 
    font-size: 20px; 
 
} 
 

 
.brick:focus:before, 
 
    .brick:focus span, .brick:hover:before, 
 
.brick:hover span { 
 
    opacity: 1; 
 
    
 
} 
 
.brick:focus:before, .brick:hover:before { 
 
    top: 0; /* 50% */ 
 
    
 
} 
 

 
.brick:focus span, .brick:hover span { 
 
    top: 0; 
 
} 
 
.brick:focus #title, .brick:hover #title { 
 
    -webkit-transition-delay: 0.25s; 
 
      transition-delay: 0.25s; 
 
} 
 
.brick:focus #info, .brick:hover #info { 
 
    -webkit-transition-delay: 0.25s; 
 
      transition-delay: 0.25s; 
 
} 
 

 
/* ------------------------- */

\t <div class="wrapper"> 
 
\t \t \t <div class="masonry"> 
 
\t \t \t \t <div class="partner"> 
 
        <a href="index.html"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509810535/Certo-120x72_hrw5eq.png" style="width: 180px; height: 120px;" class="partimg"></a> 
 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
 
       </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 
\t \t  \t \t \t <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg"> 
 
\t \t  \t \t \t \t <div class="details"> 
 
          
 
          <span id="info">Quisque vel felis lectus donec vitae dapibus magna, Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. </span> 
 
         </div> 
 
\t \t  \t \t \t </div> 
 

 
\t \t \t </div> 
 
\t \t </div> \t

. 또한 훨씬 부드럽고 뛰어 넘을 필요가 있습니다. 내가 어떻게 해결할 수 있는지에 대한 도움을 주시면 감사하겠습니다.

출처

2017-12-14 Mike.Whitehead

상단에 항상 가져가 이미지를 만들기 위해 z-index을 추가하면 세부 텍스트 overflow:hidden 및 top:0을 추가 할 수 있습니다 :

/* Partners page */ 
 

 
.masonry { 
 
    /* Masonry container */ 
 
    column-count: 5; 
 
} 
 

 
.brick img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Gotham-Light'; 
 
    margin: 0; 
 
    background: #fff; 
 
    font-size: 25px; 
 
} 
 

 
.wrapper { 
 
    width: 80%; 
 
    margin: 3em auto; 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
    vertical-align: bottom; 
 
} 
 

 
.brick { 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 

 
/* Image words/text hover effect */ 
 

 
.brick { 
 
    opacity: .99; 
 
    position: relative; 
 
} 
 

 
.wrapper .brick .details { 
 
    padding: 0px 20px 20px 20px; 
 
    color: #fff; 
 
    position: absolute; 
 
    top:0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 3; 
 
    opacity: 0; 
 
    transition: .7s ease; 
 
    background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); 
 
    overflow:hidden; 
 
} 
 

 
.brick:hover { 
 
    -webkit-transform: scale(1.5); 
 
    -webkit-transition: transform 0.5s ease-in-out; 
 
    position: relative; 
 
    z-index: 9; 
 
} 
 

 
.brick:hover .details { 
 
    opacity: 1; 
 
} 
 

 
.brick .details span { 
 
    opacity: 0; 
 
    top: 0; 
 
    /* 100px */ 
 
    -webkit-transition-property: top, opacity; 
 
    transition-property: top, opacity; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-delay: 0s; 
 
    transition-delay: 0s; 
 
} 
 

 
.brick .details #title { 
 
    line-height: 1.5; 
 
    font-weight: 500; 
 
    font-size: 18px; 
 
} 
 

 
.brick .details #info { 
 
    line-height: 1.2; 
 
    font-weight: 500; 
 
    font-size: 20px; 
 
} 
 

 
.brick:focus:before, 
 
.brick:focus span, 
 
.brick:hover:before, 
 
.brick:hover span { 
 
    opacity: 1; 
 
} 
 

 
.brick:focus:before, 
 
.brick:hover:before { 
 
    top: 0; 
 
    /* 50% */ 
 
} 
 

 
.brick:focus span, 
 
.brick:hover span { 
 
    top: 0; 
 
} 
 

 
.brick:focus #title, 
 
.brick:hover #title { 
 
    -webkit-transition-delay: 0.25s; 
 
    transition-delay: 0.25s; 
 
} 
 

 
.brick:focus #info, 
 
.brick:hover #info { 
 
    -webkit-transition-delay: 0.25s; 
 
    transition-delay: 0.25s; 
 
} 
 

 

 
/* ------------------------- */

<div class="wrapper"> 
 
    <div class="masonry"> 
 
    <div class="partner"> 
 
     <a href="index.html"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509810535/Certo-120x72_hrw5eq.png" style="width: 180px; height: 120px;" class="partimg"></a> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet 
 
     dolore magna aliquam erat volutpat.</p> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449069/2print_zszssh.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449077/2graphic_design_obcmif.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna.</span> 
 
     </div> 
 
    </div> 
 
    <div class="brick"><img src="http://res.cloudinary.com/mrmw1974/image/upload/v1509449086/2brand_identity_oo9udc.jpg"> 
 
     <div class="details"> 
 

 
     <span id="info">Quisque vel felis lectus donec vitae dapibus magna, Quisque vel felis lectus donec vitae dapibus magna. Quisque vel felis lectus donec vitae dapibus magna. </span> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

출처

2017-12-14 13:45:25

감사합니다. 어떻게 1 초 후에 조금 비늘 흘렀을까요? 내가 호버링을 멈추었을 때 이미지를 조금만 확대 한 다음 다시 크기를 조절할 수있는 방법이 있습니까? 나는 단지 이미지를 조금 돋보이게하려고 노력하고있다. –

@ Mike.Whitehead 스케일 변형으로 인한 버그처럼 보입니다.이 문제를 피하려면 이미지를 .brick 요소의 배경으로 사용하고 절대 위치없이 텍스트를 유지하십시오. –

codeep에 대한 버그가 있기 때문에 코드를 내 사이트에 올려 놓으면 원하는대로 작동합니다. –

CSS - 변형 : 이미지의 크기가 겹치고 올바르게 크기 조절되지 않음

답변

관련 문제