投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

鼠标放上去，图片上方动态显示半透明说明文字（源码）

江山如画 • • 网页制作, 网页特效 • 阅读 13899

鼠标放上去，图片上方动态显示半透明说明文字（源码）

<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)
江山如画的头像江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年2月19日 下午7:34
下一篇 2020年2月22日 下午2:40

99%的人还看了以下文章

  • 手把手教你做响应式网页，响应式布局实例入门 网页制作

    手把手教你做响应式网页，响应式布局实例入门（精）

    刚接触响应式布局的童鞋会感觉响应式布局很高大上，很难，但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例，手把手教你如何制作响应式网页。 响应式布局（Responsive Layout） 响应式布局分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    江山如画的头像 江山如画
    2018年7月28日
    10.7K0
  • 125建站网百度收录情况 网页制作

    第5课：到目前为止学到了些什么？

    上一课我们已经学习了这些： <html> <head><title></title></head> <body> </body> </html> 网页标题（title）写在head（头部）里：<title>网页标题写在这里</title>。…

    江山如画的头像 江山如画
    2018年1月20日
    7.1K0
  • jquery 网页制作

    jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题： ajax读取留言列表，每条留言后面有个回复按钮，class为“reply”,用$(“.reply”).click(function(){ //do something… })，后面通过ajax加载进来的列表中的回复按钮，点击事件会失效。 解决方法： 最简单的方法就是直接在标签中写onclick=”&#8…

    江山如画的头像 江山如画
    2019年2月16日
    14.8K0
  • css3 网页制作

    CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了：鼠标放到图片上，图片等比例放大的效果，今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能，可以在CSS里面设定旋转的角度，也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    江山如画的头像 江山如画
    2019年1月29日
    18.4K1
  • web前端开发 网页制作

    两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事，今天吾爱编程为大家介绍一下iframe自适应高度的方法，有需要的小伙伴可以参考一下： 1、需求分析： 使页面中的iframe可以自适应高度，避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一： 在iframe上面直接加onload的方法，使其自适应 <ifra…

    江山如画的头像 江山如画
    2021年3月16日
    4.1K0
  • html5专题 网页制作

    HTML5的视频播放控制技术

    介绍了HTML5的video元素和常用属性，以及视频播放控制技术，如播放、暂停、音量、全屏、回放功能的实现。

    江山如画的头像 江山如画
    2019年10月15日
    10.4K0

发表回复

登录后才能评论