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

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

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

  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    8.6K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    9.0K0
  • jQuery屏蔽页面右键,禁止复制,文本选择代码

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

    2019年10月16日
    4.3K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    6.6K0
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    6.8K0
  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    4.5K0

发表回复

登录后才能评论