效果预览
html
<body>
<article>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Elianne-Dipp.jpg" alt="Photo by Elianne Dipp">
</div>
<div class="description">Photo by Elianne Dipp</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Jared-Rice.jpg" alt="Photo by Jared Rice">
</div>
<div class="description">Photo by Jared Rice</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Gaddafi-Rusli.jpg" alt="Photo by Gaddafi Rusli">
</div>
<div class="description">Photo by Gaddafi Rusli</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Guzman-Barquin.jpg" alt="Photo by Guzman Barquin">
</div>
<div class="description">Photo by Guzman Barquin</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Gabmarjan.jpg" alt="Photo by Gabmarjan">
</div>
<div class="description">Photo by Gabmarjan</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Kalen-Emsley.jpg" alt="Photo by Kalen Emsley">
</div>
<div class="description">Photo by Kalen Emsley</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Tran-Mau-Tri-Tam.jpg" alt="Photo by Tran Mau Tri Tam">
</div>
<div class="description">Photo by Tran Mau Tri Tam</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Brooke-Lark.jpg" alt="Photo by Brooke Lark">
</div>
<div class="description">Photo by Brooke Lark</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Amos-Bar-Zeev.jpg" alt="Photo by Amos Bar Zeev">
</div>
<div class="description">Photo by Amos Bar Zeev</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Ryan-KLAUS.jpg" alt="Photo by Ryan KLAUS">
</div>
<div class="description">Photo by Ryan KLAUS</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Will-Africano.jpg" alt="Photo by Will Africano">
</div>
<div class="description">Photo by Will Africano</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Ryan-Christodoulou.jpg" alt="Photo by Ryan Christodoulou">
</div>
<div class="description">Photo by Ryan Christodoulou</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Sake-Le.jpg" alt="Photo by Sake Le">
</div>
<div class="description">Photo by Sake Le</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Levi-Guzman.jpg" alt="Photo by Levi Guzman">
</div>
<div class="description">Photo by Levi Guzman</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Elianne-Dipp.jpg" alt="Photo by Elianne Dipp">
</div>
<div class="description">Photo by Elianne Dipp</div>
</div>
</article>
</body>
css样式
html {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
html,body {
font-family:"Arial","Microsoft JhengHei",Apple LiGothic Medium,sans-serif;
margin:0;
padding:0;
font-size:62.5%;
font-weight:normal;
line-height:1.2;
word-wrap:break-word;
box-sizing:border-box;
background-color:var(--color-white);
}
a {
font-size:3em;
color:var(--color-a);
text-decoration:none;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
a:hover {
color:var(--color-black);
outline-width:0;
}
:root {
--color-black:#000000;
--color-1:#121212;
--color-a:#aaaaaa;
--color-white:#ffffff;
}
article {
display:flex;
flex-wrap:wrap;
padding:0.5rem;
}
.item {
position:relative;
margin:0.5rem;
width:calc(55% / 2 - 1rem);
}
.photos {
position:relative;
padding-top:calc(100% * 1);
width:100%;
height:0;
}
.item:nth-child(3),.item:nth-child(4),.item:nth-child(3n):nth-child(odd),.item:nth-child(3n + 1):nth-child(even) {
width:calc(45% - 1rem);
}
.item:nth-child(3) .photos,.item:nth-child(4) .photos,.item:nth-child(3n):nth-child(odd) .photos,.item:nth-child(3n + 1):nth-child(even) .photos {
padding-top:calc(100% - (100% - 45% / 2 + 1rem) / 2);
}
.photos img {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
border-radius:0.5rem;
object-fit:cover;
overflow:hidden;
}
.description {
display:flex;
position:absolute;
top:0;
left:0;
padding:0 2rem;
width:calc(100% - 4rem);
height:100%;
font-size:3.8em;
color:var(--color-1);
align-items:center;
justify-content:center;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
overflow:hidden;
opacity:0;
z-index:1;
}
.description:after {
position:absolute;
content:'';
width:100%;
height:100%;
background-color:rgb(255 255 255 / 75%);
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
opacity:0;
z-index:-1;
}
.item:hover .description,.item:hover .description:after {
opacity:1;
}
@media screen and (max-width:768px) {
.description {
font-size:3em;
}
}@media screen and (max-width:640px) {
.item {
width:100% !important;
}
.photos {
padding-top:calc(100% * 2/3) !important;
}
.description {
font-size:3.8em;
}
}
效果预览2 大图+固定方格大小
<body>
<header>
<div class="title">Lopwon Foto</div>
<div class="blog">
<a href="#">Hello World</a>
</div>
</header>
<article>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Tran-Mau-Tri-Tam.jpg" alt="Photo by Tran Mau Tri Tam" />
</div>
<div class="description">Photo by Tran Mau Tri Tam</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Elianne-Dipp.jpg" alt="Photo by Elianne Dipp" />
</div>
<div class="description">Photo by Elianne Dipp</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Jared-Rice.jpg" alt="Photo by Jared Rice" />
</div>
<div class="description">Photo by Jared Rice</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Gaddafi-Rusli.jpg" alt="Photo by Gaddafi Rusli" />
</div>
<div class="description">Photo by Gaddafi Rusli</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Guzman-Barquin.jpg" alt="Photo by Guzman Barquin" />
</div>
<div class="description">Photo by Guzman Barquin</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Gabmarjan.jpg" alt="Photo by Gabmarjan" />
</div>
<div class="description">Photo by Gabmarjan</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Kalen-Emsley.jpg" alt="Photo by Kalen Emsley" />
</div>
<div class="description">Photo by Kalen Emsley</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Brooke-Lark.jpg" alt="Photo by Brooke Lark" />
</div>
<div class="description">Photo by Brooke Lark</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Amos-Bar-Zeev.jpg" alt="Photo by Amos Bar Zeev" />
</div>
<div class="description">Photo by Amos Bar Zeev</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Ryan-KLAUS.jpg" alt="Photo by Ryan KLAUS" />
</div>
<div class="description">Photo by Ryan KLAUS</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Will-Africano.jpg" alt="Photo by Will Africano" />
</div>
<div class="description">Photo by Will Africano</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Ryan-Christodoulou.jpg" alt="Photo by Ryan Christodoulou" />
</div>
<div class="description">Photo by Ryan Christodoulou</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Sake-Le.jpg" alt="Photo by Sake Le" />
</div>
<div class="description">Photo by Sake Le</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Levi-Guzman.jpg" alt="Photo by Levi Guzman" />
</div>
<div class="description">Photo by Levi Guzman</div>
</div>
<div class="item">
<div class="photos">
<img src="http://cdn.snapic.cn/img/image/Tran-Mau-Tri-Tam.jpg" alt="Photo by Tran Mau Tri Tam" />
</div>
<div class="description">Photo by Tran Mau Tri Tam</div>
</div>
</article>
</body>
css
html {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
html,body {
font-family:"Arial","Microsoft JhengHei",Apple LiGothic Medium,sans-serif;
margin:0;
padding:0;
font-size:62.5%;
font-weight:normal;
line-height:1.2;
word-wrap:break-word;
box-sizing:border-box;
background-color:var(--color-white);
}
a {
font-size:2em;
color:var(--color-a);
text-decoration:none;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
a:hover {
color:var(--color-white);
outline-width:0;
}
:root {
--color-black:#000000;
--color-1:#121212;
--color-a:#aaaaaa;
--color-white:#ffffff;
}
header {
display:flex;
justify-content:space-between;
flex-direction:column;
position:absolute;
top:calc(50% - 10em);
left:5rem;
-webkit-transform:translate(0%,-50%);
-moz-transform:translate(0%,-50%);
-ms-transform:translate(0%,-50%);
-o-transform:translate(0%,-50%);
transform:translate(0%,-50%);
z-index:1;
}
.title {
font-size:10em;
color:var(--color-white);
}
.blog {
display:inline-block;
margin-top:3rem;
}
.blog a {
padding:1rem 1.5rem;
border-radius:3rem;
font-size:3em;
color:white;
background-color:green;
}
.blog a:hover {
color:white;
background-color:limegreen;
}
article {
display:flex;
flex-wrap:wrap;
padding:0.5rem;
}
.item:nth-child(1) {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
width:100%;
height:100vh;
z-index:0;
}
.item:nth-child(1) .photos {
position:relative;
padding:0;
width:100%;
height:100vh;
}
.item:nth-child(1) .photos:after {
content:'';
position:absolute;
top:0;
left:0;
width:75%;
height:100%;
background-image:linear-gradient(to left,rgba(0 0 0 / 0%) 0%,rgba(0 0 0 / 25%) 25%,rgba(0 0 0 / 50%) 50%,rgba(0 0 0 / 75%) 75%,rgba(0 0 0 / 95%) 100%);
z-index:1;
}
.item:nth-child(1) .description {
display:block;
top:calc(50% + 2em);
left:5rem;
padding:0;
width:auto;
height:auto;
font-size:2.5em;
color:var(--color-a);
opacity:1 !important;
}
.item:nth-child(1) .description:after {
background-color:transparent;
}
.item:nth-child(2) {
position:absolute;
top:0;
right:0;
margin:0;
padding:1rem 1rem 7rem 1rem;
width:calc(25% - 1rem);
border-radius:0.25rem;
background-color:var(--color-white);
-webkit-transform:translate(-15rem,5rem) rotate(15deg);
-moz-transform:translate(-15rem,5rem) rotate(15deg);
-ms-transform:translate(-15rem,5rem) rotate(15deg);
-o-transform:translate(-15rem,5rem) rotate(15deg);
transform:translate(-15rem,5rem) rotate(15deg);
box-shadow:0px 5px 10px 0px rgb(0 0 0 / 25%);
z-index:1;
}
.item:nth-child(2):hover {
border-radius:0.5rem;
z-index:2;
}
.item:nth-child(2) .photos {
position:relative;
padding-top:calc(100% * 1) !important;
width:100%;
padding:0;
}
.item:nth-child(3) {
position:absolute;
top:0;
right:0;
margin:0;
padding:1rem 1rem 7rem 1rem;
width:calc(25% - 1rem);
border-radius:0.25rem;
background-color:var(--color-white);
-webkit-transform:translate(-5rem,15rem) rotate(5deg);
-moz-transform:translate(-5rem,15rem) rotate(5deg);
-ms-transform:translate(-5rem,15rem) rotate(5deg);
-o-transform:translate(-5rem,15rem) rotate(5deg);
transform:translate(-5rem,15rem) rotate(5deg);
box-shadow:0px 5px 10px 0px rgb(0 0 0 / 25%);
z-index:1;
}
.item:nth-child(3) .photos {
position:relative;
padding-top:calc(100% * 1) !important;
width:100%;
padding:0;
}
.item:nth-child(n + 4) {
position:relative;
margin:0.5rem;
width:calc(33.33333% - 1rem);
top:100vh;
left:0;
}
.item:nth-child(n + 4) .photos {
position:relative;
padding-top:calc(100% * 2/3);
width:100%;
height:0;
}
.item:nth-last-child(1),.item:nth-last-child(2),.item:nth-last-child(3) {
padding-bottom:1rem;
}
.photos img {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
object-fit:cover;
overflow:hidden;
}
.description {
display:flex;
position:absolute;
top:0;
left:0;
padding:0 2rem;
width:calc(100% - 4rem);
height:100%;
font-size:3.8em;
color:var(--color-1);
align-items:center;
justify-content:center;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
overflow:hidden;
opacity:0;
z-index:1;
}
.description:after {
position:absolute;
content:'';
width:100%;
height:100%;
background-color:rgb(255 255 255 / 75%);
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
opacity:0;
z-index:-1;
}
.item:hover .description,.item:hover .description:after {
opacity:1;
}
@media screen and (max-width:768px) {
header,footer,.item:nth-child(1) .description {
left:2rem;
}
.item:nth-child(2) {
width:calc(35% - 1rem) !important;
-webkit-transform:translate(-10rem,25rem) rotate(15deg);
-moz-transform:translate(-10rem,25rem) rotate(15deg);
-ms-transform:translate(-10rem,25rem) rotate(15deg);
-o-transform:translate(-10rem,25rem) rotate(15deg);
transform:translate(-10rem,25rem) rotate(15deg);
}
.item:nth-child(3) {
width:calc(35% - 1rem) !important;
-webkit-transform:translate(-3rem,5rem) rotate(355deg);
-moz-transform:translate(-3rem,5rem) rotate(355deg);
-ms-transform:translate(-3rem,5rem) rotate(355deg);
-o-transform:translate(-3rem,5rem) rotate(355deg);
transform:translate(-3rem,5rem) rotate(355deg);
}
.description {
font-size:3em;
}
}
@media screen and (max-width:640px) {
.item {
width:100% !important;
}
.description {
font-size:3.8em;
}
.item:nth-child(2) {
-webkit-transform:translate(-15rem,35rem) rotate(15deg);
-moz-transform:translate(-15rem,35rem) rotate(15deg);
-ms-transform:translate(-15rem,35rem) rotate(15deg);
-o-transform:translate(-15rem,35rem) rotate(15deg);
transform:translate(-15rem,35rem) rotate(15deg);
}
.item:nth-child(3) {
-webkit-transform:translate(-3rem,30rem) rotate(355deg);
-moz-transform:translate(-3rem,30rem) rotate(355deg);
-ms-transform:translate(-3rem,30rem) rotate(355deg);
-o-transform:translate(-3rem,30rem) rotate(355deg);
transform:translate(-3rem,30rem) rotate(355deg);
}
.item:nth-child(2) .description,.item:nth-child(3) .description {
font-size:3em;
}
}
@media screen and (max-width:480px) {
.title {
font-size:7em;
}
.item:nth-child(2) {
-webkit-transform:translate(-10rem,45rem) rotate(15deg);
-moz-transform:translate(-10rem,45rem) rotate(15deg);
-ms-transform:translate(-10rem,45rem) rotate(15deg);
-o-transform:translate(-10rem,45rem) rotate(15deg);
transform:translate(-10rem,45rem) rotate(15deg);
}
.item:nth-child(3) {
-webkit-transform:translate(-3rem,35rem) rotate(355deg);
-moz-transform:translate(-3rem,35rem) rotate(355deg);
-ms-transform:translate(-3rem,35rem) rotate(355deg);
-o-transform:translate(-3rem,35rem) rotate(355deg);
transform:translate(-3rem,35rem) rotate(355deg);
}
}