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

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

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

    2018年2月26日
    4.6K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    18.0K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    10.4K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    11.6K0
  • 带左右箭头控制的网站幻灯片轮播切换效果

    一款比较实用的带左右箭头按钮控制的jquery slider图片插件,网站幻灯片焦点图片轮播切换代码下载。 页面代码非常简洁,适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

    2019年4月10日
    18.3K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    17.1K1

发表回复

登录后才能评论