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

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

<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)
江山如画的头像江山如画管理团队
上一篇 2020年2月19日 下午7:34
下一篇 2020年2月22日 下午2:40

99%的人还看了以下文章

  • 图片的title和alt属性区别

    图片的title和alt属性是初学者容易混淆的。125网页设计给大家介绍下title和alt属性的用法及区别

    网页制作 2020年2月23日
    8.1K0
  • 超酷的HTML5 3D图片旋转动画特效

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

    2018年9月28日
    21.9K0
  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    4.1K0
  • 纯css实现的三级下拉导航菜单

    非常简洁的一个三级导航菜单,纯css实现,适用于企业产品分类导航等,代码精简,兼容所有浏览器。 See the Pen 纯css实现的三级下拉导航菜单 by 江山如画 (@jgyzhr)on CodePen.

    2019年11月1日
    14.0K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    8.2K0
  • 点击弹出带关闭按钮的窗口特效(兼容所有浏览器)

    弹出页面被大多浏览器拦截,现在多数改为弹出窗口,即通过弹出层来实现,今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

    2018年5月9日
    9.7K0

发表回复

登录后才能评论