鼠标放上去,图片上方动态显示半透明说明文字(源码)

鼠标放上去,图片上方动态显示半透明说明文字(源码)

<style>
.itemInWorks{ width: 240px;
              height: 150px;
              border-radius:5px;
             font-size: 20px;
             font-weight: 600; 
             color: #FFFFFF;
             text-align: center; 
             line-height: 40px;
             background: url(http://www.125jz.com/wp-content/uploads/2018/04/10.png);
             background-repeat: no-repeat;
             background-size: 240px 150px;
            box-shadow: #909090 0px 0px 10px;
            overflow: hidden;
            position: relative;
    }
   /*半透明部分*/
    .itemInWorks .mask{
        height:60px;
        width:232px;
        color: #f5f1e5;
        line-height: 23px;
        text-align: left;
        padding-left: 8px;
        border-radius:2px 2px 5px 5px;
        font-size: 14px;
        font-weight: 300;
        position: absolute;
        top:150px;
        background-color:rgba(0,0,0,0.5);
        transition:top 0.5s ease-in-out;
    }
    .itemInWorks:hover .mask{
       top:90px ;
   }
</style>

<div class="itemInWorks">
网页设计
<div class="mask">www.125jz.com
日期:2022/02/14</div>
</div>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4934.html

(0)
江山如画的头像江山如画管理团队
Java   JDBC操作Mysql数据库增删改查,分页查询实例详解(源码)
上一篇 2020年2月19日 下午7:34
初学网页制作从这里开始
下一篇 2020年2月22日 下午2:40

99%的人还看了以下文章

  • 超酷的HTML5 3D图片旋转动画特效

    中国网页设计分享的一款HTML5 3D图片动画特效,使用js动画框架TweenMax 技术实现。 这款HTML5 3D动画非常酷,当在图片上面拖动鼠标时,图片会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。 效果演示      源码下载

    2018年9月28日
    26.5K0
  • 如何制作图片按钮,并为图片按钮添加提交表单和重置表单功能

    网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮。 今天中国网页设计给大家分享在网页制作中怎么制作图片按钮,并为图片按钮添加提交表单和重置表单功能。 一、图片按钮的制作方法 1、<input type=”image” /> 定义图像形式的提交按钮。 <input type=”image” sr…

    2018年9月30日
    11.5K0
  • CSS Sprites:图片整合技术详细案例

    CSS Sprites:图片整合技术详细案例CSS Sprites:图片整合技术详细案例CSS Sprites:图片整合技术详细案例CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    11.2K0
  • 第3课:HTML的元素与标签

    本节课我们学习HTML的重要成分——元素(element)。元素用于结构化HTML文档,并告知浏览器如何呈现网页。一般来说,元素由首标签(start tag)、内容(content)和尾标签(end tag)构成。 “标签”是什么? 标签(tag)指示元素的起始与结束,所有标签都由“<”及“>”所围住,如<html>。一般标签成对出现,首标…

    2018年1月20日
    11.0K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    15.9K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    6.1K0

发表回复

登录后才能评论