我试图在图片库上执行CSS3过渡和叠加,并希望有一点帮助确定如何正确控制效果.看起来我需要根据位置将8个图像划分为4个略有不同的div包装(左上角图像需要向右和向下增长200%,右上角图像需要增长200%到左,下等等).我的目的是消除屏幕上的剪辑或其他容器/元素.
每个图像应该生长并覆盖相邻的3个图像,使得其他部分中的其他元素不会发生剪切或者剪切窗口的范围.这应该发生在图像和文本叠加层上(暂时禁用文本叠加层).
请问有关如何执行此类效果的一些建议吗？
以下只是我试图做的一个非常简单的示例.(我似乎不明白如何在转换期间保持行位置.)
<!DOCTYPE html>
<html>
<head>
<style>
.div-table{
display:table;
width: auto;
}
div {
width: 100px;
height: 100px;
position: relative;
display: inline-block;
-webkit-transition-property: width, height; /* For Safari 3.1 to 6.0*/
-webkit-transition-duration: 4s; /* For Safari 3.1 to 6.0 */
transition-property: width, height;
transition-duration: 4s;
}
div:hover {
position:absolute;
z-index: 10;
width: 425px;
height: 425px;
}
</style>
</head>
<body>
<h1>My Gallery of Color Boxes</h1>
<p>Hover over the element below, and it will expand to cover the other
elements …