首页 \ 问答 \ CSS - 转换:缩放图像重叠并且不能正确缩放(CSS - transform:scale images overlapping and not scaling correctly)

CSS - 转换:缩放图像重叠并且不能正确缩放(CSS - transform:scale images overlapping and not scaling correctly)

我正在尝试重新创建这种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>	

我需要每个图像,当悬停时,重叠并站在其他图像上,文本保留在图像上。 它也需要更顺畅,而不是跳跃。 任何协助,如何我可以纠正,将不胜感激。


I'm trying to recreate this codepen transform:scale transition for a particular page on my site but it's not working as it should - as you can see here on this code snippet (view on full page) - images over/under-lapping and jerky rather than smooth.

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

I need each image, when hovered, to overlap and stand over the others and for the text to remain on the image. It also needs to be much smoother and not jump. Any assistance as to how I can rectify would be appreciated.


原文:https://stackoverflow.com/questions/47814623
更新时间:2022-04-08 15:04

最满意答案

对于未来的用户,如https://www.w3.org/TR/webdatabase/#databases中所述

无法枚举或删除此API可用于源的数据库。

但由于nwjs应用程序作为chrome扩展程序,你可以删除所有webSql数据库(清除websql存储),如下所示:

在你的package.json中添加1:

"name": "myapp",
"permissions": [
    "browsingData"
  ]

2-来自javascript调用此命令

chrome.browsingData.removeWebSQL({since:0, originTypes:{extension:true}});

注意经过大量测试后,我个人建议对复杂对象使用带有JSON.stringify的LocalStorage,或者为关系数据结构使用SQlite


for future users, as mentioned in https://www.w3.org/TR/webdatabase/#databases

There is no way to enumerate or delete the databases available for an origin from this API.

but since nwjs app works as chrome extension there is away where you can delete all webSql databases (clear websql storage), like this:

1-in your package.json add:

"name": "myapp",
"permissions": [
    "browsingData"
  ]

2- from javascript call this command

chrome.browsingData.removeWebSQL({since:0, originTypes:{extension:true}});

Note After extensive test i personally did i recommended using LocalStorage with JSON.stringify for complex objects or SQlite for relational data structure

相关问答

更多
  • 根据http://www.caniuse.com/indexeddb ,对indexedDB的支持相当有限,所以我暂时不会跳转到它。 但是,当实施成熟时,未来很可能会发生变化。 就个人而言,IndexedDB看起来很奇怪和复杂,特别是当你超越简单的单表操作时。 我没有对它进行任何实际测试,但由于你必须手动完成一些事情(比如连接记录),你最终会得到更多的JS代码,这会转移到更多区域来隐藏bug。 那么IndexedDB可能是另一种选择吗? 可以使用IndexedDB来复制具有多个具有大量数据的相关表的数据库的 ...
  • 这段代码将按照您的要求执行,因为WebSQL接口是异步的,您无法“返回”值。 launchRequest('SELECT * from items',nombreItems); function launchRequest(requete,callback){ var db = openDatabase('database', '1.0', 'database', 2 * 1024 * 1024); db.transaction(function (tx) { tx.e ...
  • Firefox并没有自己解决WebSQL问题。 W3C宣布它已经死亡 。 请注意, Firefox仍然使用SQLite ,它与WebSQL不同。 但是,Greasemonkey脚本无法直接访问SQLite。 您可以使用sessionStorage,localStorage和/或globalStorage来保存值。 或者您可以使用IndexedDB替代WebSQL。 最后,对于全面的SQL功能, AJAXing数据的旧标准来回到您自己的服务器 。 显然,由于缺乏持续的支持,以及增加安全漏洞的确定性,保留在FF ...
  • 您可以使用我的库ydn-db进行非常简单的SQL查询,该查询适用于任何Web数据库。 要获得对SQL的全面支持,请查看商业SequelSphere js库http://www.sequelsphere.com/docs/latest/doc/Supported%20SQL.html 。 不幸的是,查询执行目前在内存中。 定价非常贪婪。 You can use my library, ydn-db, for very simple sql query, which works with any web dat ...
  • 我实际上从未遇到过与你相同的问题,我的WebSQL实现示例: var projectName = {}; projectName.webdb = {}; projectName.webdb.db = null; projectName.webdb.open = function() { projectName.webdb.db = openDatabase('Database Name', '1.0', 'description', 10 * 1024 * 1024); } projectName. ...
  • 在我有限的经验中,changeVersion可以在Chrome上运行。 我也在这里看到有关它在Safari上无法正常工作的投诉,但确实如此。 但是,有两个捕获: 抓住1: 通常,changeVersion 似乎失败(它会产生错误,db.version仍将返回旧值),但事务回调将触发,当您重新打开网页及其数据库时,版本号将是正确的。 抓住2: 看来你必须准确提供五个参数,包括三个回调。 如果您不提供这五个参数,例如您只执行前三个参数,那么当前版本将保持不变。 因此,如果您按照本教程中的每个人所指的指示,您会感 ...
  • 对于未来的用户,如https://www.w3.org/TR/webdatabase/#databases中所述 无法枚举或删除此API可用于源的数据库。 但由于nwjs应用程序作为chrome扩展程序,你可以删除所有webSql数据库(清除websql存储),如下所示: 在你的package.json中添加1: "name": "myapp", "permissions": [ "browsingData" ] 2-来自javascript调用此命令 chrome.browsingData. ...
  • IndexedDB是浏览器的下一代存储API。 但Apple并不认同IndexedDB优于Web SQL Storage 。 由于iOS上开发人员对WebSQL的大量使用以及IndexedDB的低级API性质,Apple很可能会坚持使用WebSQL多年。 您可以使用IndexedDB polyfill ,也可以像我自己的ydn-db一样使用数据库抽象库。 我计划使用WebSQL polyfill,但目前还没有。 对于IndexedDB到WebSQL的查询级别,我必须弄清楚表连接,缓冲排序和关系约束。 Ind ...
  • 由于事务以异步方式运行,因此无法以简单的方式返回值... 这里https://stackoverflow.com/a/12462907/828551 @apsillers有解决方案:回调。 As transactions run asynchronously, you cannot return in an easy way values... Here https://stackoverflow.com/a/12462907/828551 @apsillers has the solution: call ...
  • 数据位于%HOMEPATH%\AppData\Local\Ofi Labs\PhantomJS 。 不确定哪些文件对应于什么,但是那里有很多.db文件。 顺便说一下,删除目录解决了我的问题。 The data is located in %HOMEPATH%\AppData\Local\Ofi Labs\PhantomJS. Not sure exactly which files correspond to what, but there were a number of .db files in the ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)