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

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

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

  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    11.7K0
  • jQuery插件实现省、市、区县三级联动代码,调用非常简单

    在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码,今天125建站网给大家分享一款中国省、市、区县三级联动的代码,通过jQuery插件实现,调用非常简洁。 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。 <div><!– conta…

    2019年6月5日
    7.0K0
  • CSS+JS制作纵向点击展开的二级导航菜单

    网页制作时,如产品分类目录、导航等,需要制作纵向二级导航菜单,点击展开分类显示子目录,再点击收缩起目录。 中国网页设计分享的二级导航菜单使用CSS+JS制作,调用简单方便,可移植、可修改。 网页HTML代码(放在body区域): <div id=”my_menu” class=”sdmenu”> <div> <span>教…

    2018年9月19日
    7.4K0
  • 纯css制作简洁的绿色导航菜单

    css制作简洁的绿色导航菜单,代码非常简单,背景颜色和背景图片换下,即可满足大多数导航菜单需要。 导航菜单所需图片素材: 导航菜单HTML代码: <div id=”nav”> <ul> <li><a href=”http://www.125jz.com/”>首页</a></li> &lt…

    2018年2月26日
    4.8K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    5.2K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    5.7K0

发表回复

登录后才能评论