在html中,使用css控制实现图片下方浮动一行文字说明,效果图如下:
代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<style type="text/css">
.item{
}
.item-top{
width: 300px;
height: 420px;
position: relative;
display:block;
overflow: hidden;
}
.item-top .item-top-text{
background: rgba(190, 195, 191, 0.44);
padding: 10px 20px;
position: absolute;
width: 300px;
height: 20px;
bottom: -60px;
transition: bottom ease .3s;
}
.item-top:HOVER .item-top-text {
bottom: 0px;
}
</style>
</head>
<body>
<div>
<div class="item">
<div class="item-top">
<a href="javascript:;">
<img alt="java" src="image/java.jpg">
</a>
<div class="item-top-text">
<a href="javascript:;">测试文本</a>
</div>
</div>
</div>
</div>
</body>
</html>transition: bottom ease .3s;说明:从底部出现
https://blog.xqlee.com/article/55.html
评论
相关文章
在css中有有一下几种换行策略:1. word-break:break-all;只对英文起作用，以字母作为换行依据（既，如果一个单词在换行时比较长会自动拆分单词
spring boot 开发技巧，在开发web项目中跳过thyemeleaf模板/js/css等缓存避免每次修改资源文件都需要重启服务器
定义和用法animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创
需求将静态资源如css/js/图片缓存到不用每次都到后端服务去拿取，减少性能消耗。 配置nginx缓存配置缓存文件存放信息在nginx配置文件，httpd内部配
最近在学习JavaFX，发现资料很少，连基本的图片读取都很多错误版本