div+css实现相册悬浮放大效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css实现相册悬浮放大效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; min-height: 100vh; display: grid; place-items: center; } .gallery { display: grid; grid-template-columns: repeat(6, 105px); grid-auto-rows: 105px; &:has(:hover) img:not(:hover), &:has(:focus) img:not(:focus){ filter: brightness(0.5) contrast(0.5); } & img { object-fit: cover; width: 200px; height: 200px; clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z"); transition: clip-path 0.25s, filter 0.75s; z-index: 1; position: relative; grid-column: auto / span 2; border-radius: 5px; &:nth-child(5n - 1) { grid-column: 2 / span 2 } &:hover, &:focus { clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z"); z-index: 2; transition: clip-path 0.25s, filter 0.25s; } &:focus { outline: 1px dashed black; outline-offset: -5px; } } } </style> </head> <body > <article class="gallery"> <img src="//repo.bfw.wiki/bfwrepo/image/62d214710bb8f.pn.........完整代码请登录后点击上方下载按钮下载查看
网友评论0