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

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

<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%的人还看了以下文章

  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    10.6K0
  • 第9课:盒状模型

    CSS中的盒状模型(box model)用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距(margin)、边框(border)、内边距(padding)和内容的具体操作。下图显示了盒状模型的结构: CSS中的盒状模型 上面的图示看上去可能感觉有点理论化,好吧,让我们试着用一个实例来解释盒状模型。在我们的例子中,有一个标题和一些文本…

    2020年2月25日
    8.1K0
  • jQuery带标题的图标图片轮播特效(免费)

    在<head></head>之间引入 <link rel=”stylesheet” type=”text/css” href=”css/font-awesome.css”> <link rel=”stylesheet” href=”css/style.css”> 在<body></body&g…

    2018年9月12日
    10.8K0
  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    5.7K0
  • 纯css实现的三级下拉导航菜单

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

    2019年11月1日
    15.5K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    9.0K0

发表回复

登录后才能评论