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
最满意答案
对于未来的用户,如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(WebSQL in Firefox)[2023-06-09]
Firefox并没有自己解决WebSQL问题。 W3C宣布它已经死亡 。 请注意, Firefox仍然使用SQLite ,它与WebSQL不同。 但是,Greasemonkey脚本无法直接访问SQLite。 您可以使用sessionStorage,localStorage和/或globalStorage来保存值。 或者您可以使用IndexedDB替代WebSQL。 最后,对于全面的SQL功能, AJAXing数据的旧标准来回到您自己的服务器 。 显然,由于缺乏持续的支持,以及增加安全漏洞的确定性,保留在FF ... -
IndexedDb上的WebSQL语法(WebSQL syntax on IndexedDb)[2022-02-06]
您可以使用我的库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 ...
-
Windows上的PhantomJS localstorage和WebSQL在哪里?(Where is PhantomJS localstorage and WebSQL located on Windows?)[2023-08-17]
数据位于%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 ...