CSS - 转换：缩放图像重叠而不是正确缩放

时间：2017-12-14 13:33:46

标签： html css css3

我尝试重新创建此codepen转换：我网站上某个特定网页的转换比例但它无法正常工作 - 正如您在此代码段中看到的那样（全页视图） - 图像重叠/不足和生涩而不是平滑。

＆＃13;
＆＃13; 
/* 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;
  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));
}

.brick:hover {
	-webkit-transform: scale(1.5);
	-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;
}

/* -------------------------   */
＆＃13; 
	<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>
＆＃13;
＆＃13;
＆＃13;

我需要每个图像在悬停时重叠并站在其他图像上，并使文本保留在图像上。它也需要更平滑而不是跳跃。任何有关我如何纠正的协助将不胜感激。

1 个答案:

答案 0 :(得分：1)

添加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>

相关问题
最新问题