当前位置：首页 > 网页特效 > 鼠标效果

30种炫酷html5鼠标滑过图片标题显示效果

分类：鼠标效果日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML

------------

```html
<div class="grid">
  <figure class="effect-lily">
    <img src="img/1.jpg" alt="img01"/>
    <figcaption>
      <h2>Nice <span>Lily</span></h2>
      <p>Lily likes to play with crayons and pencils</p>
      <a href="http://www.htmleaf.com/">View more</a>
    </figcaption>     
  </figure>
  
</div>
```
##### CSS

------------

下面列出了“Sadie”效果的css代码，我们将在伪元素上使用线性渐变来制作标题动画效果。

```html
figure.effect-sadie figcaption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
  content: '';
  opacity: 0;
  transform: translate3d(0,50%,0);
}
 
figure.effect-sadie h2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  color: #484c61;
  transition: transform 0.35s, color 0.35s;
  transform: translate3d(0,-50%,0);
}
 
figure.effect-sadie figcaption::before,
figure.effect-sadie p {
  transition: opacity 0.35s, transform 0.35s;
}
 
figure.effect-sadie p {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2em;
  width: 100%;
  opacity: 0;
  transform: translate3d(0,10px,0);
}
 
figure.effect-sadie:hover h2 {
  color: #fff;
  transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
 
figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
  opacity: 1;
  transform: translate3d(0,0,0);
}
```

web299.com

30种炫酷html5鼠标滑过图片标题显示效果

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果