这是一款使用CSS3制作的鼠标HOVER图片悬停方向感知特效。该特效能够在鼠标hover图片时,在图片上产生一个遮罩层,并且在移动鼠标时,遮罩层会根据鼠标的方向进行移动。
使用方法
HTML结构
该CSS3鼠标HOVER图片悬停方向感知特效的HTML结构如下:
<div class="container"> <div class="row"> <div class="col"> <div class="photo-container" style="background-image:url(img/1.jpg)"></div> <h2>图片标题 </h2> <div class="slide"> <p>图片的描述文本</p> </div> </div> <div class="col"> <div class="photo-container" style="background-image:url(img/2.jpg)"></div> <h2>图片标题 </h2> <div class="slide"> <p>图片的描述文本</p> </div> </div> ...... </div> </div>
CSS样式
使用下面的CSS代码来制作一个九宫格布局的图片画廊:
.container { margin: 0 auto; padding: 2rem; max-width: 1200px; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; } .col { color: #fff; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 260px; position: relative; } .col h2 { font-weight: 300; font-size: 1.33333rem; line-height: 1.25; margin: 0; position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 0; } .col:nth-child(2) { min-width: 20%; } .col:nth-child(4) { min-width: 33%; } .col:nth-child(3) + .col:nth-child(3) { min-width: 50%; } .photo-container { background: #0f0523 50% 50% / cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: 1s; transition: 1s; -webkit-transform-origin: bottom right; transform-origin: bottom right; } .photo-container::before { background: -webkit-linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320); background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320); content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .col:hover .photo-container { -webkit-transform: scale(1.25); transform: scale(1.25); } .slide { background: rgba(25, 1, 21, 0.8); padding: 0 1.5rem; }
产生方向感知的核心CSS3代码如下:
.col { overflow: hidden; position: relative; } .slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all 0.275s ease-in-out, visibility 0s 0.275s; transition: all 0.275s ease-in-out, visibility 0s 0.275s; visibility: hidden; will-change: transform; -webkit-transform: translateY(100%); transform: translateY(100%); } .row:hover ~ .row .slide { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .row:hover .slide { -webkit-transform: translateX(100%); transform: translateX(100%); } .row:hover .col:hover ~ .col .slide { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .row:hover .col:hover .slide { -webkit-transform: none; transform: none; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; }