html - CSS - 变换 :scale images overlapping and not scaling correctly-6ren

html - CSS - 变换 :scale images overlapping and not scaling correctly

转载作者：太空宇宙更新时间：2023-11-04 07:50:25

我正在尝试重新创建此 codepen变换:我网站上特定页面的缩放转换，但它没有按预期工作 - 正如您在此代码片段中看到的那样(在整页上查看) - 图像覆盖/覆盖不足和不稳定而不是平滑。

/* 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;
}

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

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

我需要每张图片在悬停时重叠并位于其他图片之上，并且文本保留在图片上。它还需要更平滑而不是跳跃。任何有关我如何纠正的帮助将不胜感激。

最佳答案

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

关于html - CSS - 变换 :scale images overlapping and not scaling correctly，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47814623/

文章推荐： java - RabbitMQ Java客户端异步主题接收

文章推荐： c - 如何为矩阵中的特定元素动态分配内存？

文章推荐： java - 用 Java 解密 Blowfish/CBC

文章推荐：这个 memcpy 会导致未定义的行为吗？

Java帮助: overlapping rectangles that paint a new color where the rectangles overlap
所以我正在做一个Java作业，我必须创建一个矩形类，该类在一个绘制重叠矩形的程序中使用，并且在矩形重叠的地方，用新的颜色绘制一个新的矩形。我添加了硬件描述的链接，因为我认为让您查看它比我试图解释它更容
html - CSS 定位 : How to make 2 overlapping divs and then 1 more div to the right of the overlapping divs
如何将两个重叠的 div 加上第三个 div 放在那些重叠的 div 的右侧(但第三个 div 没有一直 float )？ I overlap id=two. I overlap id=one. I
overlap - 如何有效地重叠间隔
我需要你的帮助，我有一个问题(见图)，我假设有两个数组，每个数组都包含不同长度和实际值的间隔，我需要找出我如何有效地重叠这些间隔。我对想法、论文理论或具体算法持开放态度，它们会让我找到出路! 我猜想
R气泡图: labels overlapping
尝试编写一个从聚合数据返回气泡图的函数。我将“agg”中的 data.frame 列传递给它。 aggs2 9) } ##order data.frame by mean agg1 <
javascript - 为什么在不应该存在的矩形元素之间存在空白/"overlap"？
我正在使用 d3.js 以这种方式生成一些直接位于彼此上方的矩形: var greenRed = d3.select(".green-red").append("svg") .attr("he
c - "overlapping"功能的良好库设计
我正在尝试创建一个库，它提供一个简单的链表实现以及该链表的一些概括，例如堆栈和队列，所有这些都基于基本链表。问题是，我希望拥有具有自己的“私有(private)”函数的不同类型，这样您就不会使用“s
jquery - Ajax请求 'overlapping'
我使用 AJAX 和 JQuery 从 MySQL 数据库中提取数据，基本上使用以下内容: function getCard(card, lineNr, linedisplay, type){ var
SQL OVERLAPS 如何包含极端的日期？
如何在 SQL OVERLAPS 中包含开始日期和结束日期？喜欢=。怎么办？因为在我看来 OVERLAPS 只检查两者之间的范围，但是例如: 日期 2001 年 1 月 1 日 - 2001 年
css - 'overlapping' 字符的字母间距问题
我在使用在 Google Web Fonts 上找到的字体时遇到了一些问题. 正如您在下面发布的图片中看到的，当我使用 Firefox 时，“Versus”中的大写 V 与“e”重叠。尽管当我使用 C
835. Image Overlap 图像重叠
题目地址：https://leetcode.com/problems/image-overlap/description/ 题目描述 Twoimages A and B are given, re
836. Rectangle Overlap 矩形重叠
题目地址：https://leetcode.com/problems/rectangle-overlap/description/ 题目描述： Arectangle is represented
Solr 性能警告 : Overlapping onDeckSearchers
在我们的测试环境中，我们的 solr 搜索引擎一直存在许多问题。我们在 4.6 版、单分片、4 个节点上有一个 solr 云设置。我们看到领导节点上的 CPU 水平线达到 100% 几个小时，然后服务
Excel公式: Overlapping Dates in table
我正在做一个 excel 任务，我必须找出是否有重叠的日期。在我的 excel 工作表中有 startDate(column D) 和 EndDate(comun E) 的列，由此我必须确定是否存在
Silverlight 全景控件 : Control overlap?
在这张图片中，一个全景项目的内容渗透到前一个项目上: 如何在 Expression Blend/with XAML 中执行此操作？这是我目前的 XAML:
iPhone : TabBar overlaps above UIScrollView
我已经以编程方式创建了一个 iPhone UI，但我只是不知道如何调整 View ，以免它被 TabBar 重叠。这是所有权层次结构: -AppDelegate UITabBarController
maxima - wxMaxima : overlapping print
我正在使用 wxMaxima 16.12.0 (Maxima 5.39.0)，当我尝试打印输出时，出现重叠文本。这是一个例子(请忽略命令不正确的事实) 第一张图片有时也会发生在 print和 pr
Vim 语法高亮 : overlapping regex
我尝试为 javascript 添加一些语法高亮到 vim，但我一直遇到一个问题:当字符已经高亮时，它们似乎被所有其他正则表达式完全忽略。例如，我尝试为函数的参数列表添加语法高亮显示。在创建正确的
java - 安卓 : ImageView overlapping
我有五个 ImageView(ImageButton)，我想将其显示在一行上，但是当我在小型设备上时，我的最后一个图像被裁剪了？我该如何修复它？有没有办法检测屏幕宽度？ |一个 |乙| C | d
Vim 语法高亮 : overlapping regex
我尝试为 javascript 添加一些语法高亮到 vim，但我一直遇到一个问题:当字符已经高亮时，它们似乎被所有其他正则表达式完全忽略。例如，我尝试为函数的参数列表添加语法高亮显示。在创建正确的
list - 以 "overlapped"的方式向列表添加值
我将用数学解释，这是我正在努力为以下内容编写 Scheme 代码的转换: (f '(a b c) '(d e f)) = '(ad (+ bd ae) (+ cd be af) (+ ce bf) c

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS - 变换 :scale images overlapping and not scaling correctly