css实现在图片下方加文字说明

教程分享 > Java教程 > 博文分享 (3919) 2024-03-15 09:58:59

在html中,使用css控制实现图片下方浮动一行文字说明,效果图如下:

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;说明:从底部出现


相关文章
jQuery添加/改变/移除CSS类及判断是否已经存在CSS,jquery,css
css实现在图片下方加文字说明,图片浮动说明标题css实现
css
如何使用css3设置div为圆角样式,以及分别对每个角都可以自定义设置大小
如何使html中的英语单词换行。在css中有有一下几种换行策略:
css设置背景图片不随浏览器滚动条滚动,即固定背景图片
步骤:1、配置文件webpack.config.js:  {     test:/\.css$/,     loader:'style-loader!css-loader'  ...
spring boot 开发技巧,在开发web项目中跳过thyemeleaf模板/js/css等缓存避免每次修改资源文件都需要重启服务器
网页布局是 CSS 的一个重点应用,之前都是盒子模型,flex布局是一种更优于盒子模型的先进方式,流行的开源前端框架bootstrap4之后也修改为了以flex布局为主。
设置数据源将数据写入到 Model 中 @RequestMapping("/menulist") public String MenuManagerList(M
Thymeleaf 递归,Thymeleaf模板引擎递归展示如评论留言等场合适用
1.使用idea创建JavaFX项目idea创建JavaFX项目创建后运行尝试:运行结果 可以看到目前是能正常运行 Hello Word项目的,这个时候还没有maven支持
问题描述JavaFX maven项目在idea中启动报错:Exception in thread "WindowsNativeRunloopThread" java.lang.NoSuchMet...
问题描述idea启动maven的JavaFX项目报错:Exception in Application start method java.lang.reflect.InvocationTarg...
最近在学习JavaFX,发现资料很少,连基本的图片读取都很多错误版本
问题描述最近写JavaFX程序遇到了下面的错误:Exception in thread "pool-2-thread-1" java.lang.IllegalStateException: No...