像这种需求你可以用js或者jQuery编写。
如果不想使用js或者jquery，那么用css的过渡属性代码如下：
鼠标滑入，出现效果
transition: right .7s ease
right为过渡的属性，可以是宽高，top/lelft/right/bottom/opacity等等。只要记住transition不能过渡display就行。
.7s 为过渡所需要的时间，ease为过渡的样式，是匀速过渡还是先快后慢等等。
如果没有鼠标事件，那么就需要用到css3的动画，animation。css3的动画详情卡查看https://mengkedu.com/
不知道你是要的那种效果：类似于这种的吗？下面两种仅供参考。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>鼠标移入显示文本</title>
<link href="my.css" rel="stylesheet" type="text/css">
<style>
#body1{width:960px height:auto margin:20px auto 0px auto}
#body1 ul{}
#body1 li{float:left width:239px text-align:center height:318px position:relative}
#body1 img{ position:absolute top:0px left:5px}
#body1 span{display:block position:absolute background:#666 height:70pxbottom:0px left:5px width:220pxcolor:#fff opacity:0.7}
</style>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function(){
$('#body1 li').find('span').hide() //隐藏全部
$('#body1 li').hover(function(){
$(this).find('span').stop(true,true).slideDown()
},function(){
$(this).find('span').stop(true,true).slideUp()
})
})
</script>
</head>
<body>
<div id="body1">
<ul>
<li>
<a href="#">
<img src="img/3.jpg" />
<span>说明内容说明内容说明内容说明内容</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.jpg" />
<span>说明2内容说明内容说明内容说明内容</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.jpg" />
<span>说明3内容说明内容说明内容说明内容</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.jpg" />
<span>说明4内容说明内容说明内容说明内容</span>
</a>
</li>
</ul>
</div>
</body>
</html>
第二种：还有一种是用的css3实现的，
实现原理：刚开始框就存在了，只不过透明度为全透明，鼠标移入后透明度不透明就显示出来了，框稍微动画一些的话就用到css3的旋转之类的了。如下图
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>css3练习</title>
<link href="my-1.css" rel="stylesheet" type="text/css">
<style>
#bt{width:100% height:50px font-size:20px background:#06F color:#fff text-align:center line-height:50px margin-bottom:10px}
figure{position:relative width:33.33% height:270px float:left overflow:hidden}
figure img{width:100% opacity:0.9transition: all 0.35s}
figcaption{position:absolute top:10px left:10px color:#fff font-family:"微软雅黑"}
@media screen and (max-width:600px){
figure{width:100%}
}
@media screen and (max-width:1000px) and (min-width:601px){
figure{width:50%}
}
@media screen and (min-width:1001px){
figure{width:33.33%}
}
.d2{background:#000}
.d2 figcaption{width:100% height:100%}
.d2 figcaption h2{margin-top:10%margin-left:15%}
.d2 figcaption p{margin-top:5%margin-left:15% transform:translate(0px,50px) opacity:0}
.d2 figcaption div{width:80% height:60% border:5px solid white position:absolute top:10% left:10% transform:translate(0px,-210px) rotate(0deg)}
.d2:hover figcaption div{ transform:translate(0px,0px) rotate(180deg)}
.d2:hover img{ opacity:0.7}
.d2:hover figcaption p{margin-top:5%margin-left:15% font-size:17px font-weight:bold transform:translate(0px,0px)opacity:1}
/*----------------------------end-------------------------------------------*/
</style>
</head>
<body>
<div id="bt">CSS3.0的样式练习</div>
<figure class="d2">
<img src="img/48.jpg"/>
<figcaption>
<h2>旋转动画</h2>
<p>飞来飞去，飞来飞舞</p>
<div></div>
</figcaption>
</figure>
</body>
</html>
大家都知道css中<ul>元素中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白 查了资料才实现下面GIF图的效果。（有什么更好的方法或者有写的不对的地方 希望大神们多多指出，与君共勉）
效果GIF图：
第一步 ul 中的css设置 <ul id = "list"></ul>
#list { overflow-x: auto//设置x轴可滑动 list-style: none//去掉li上的小点 white-space:nowrap//元素不换行 width: auto(宽度) }
第二步 li中的css设置 <li class = "item">
.item { margin-left: 20px//每个li设置间距为20px display: inline-block//让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }
先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。
这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动
width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。
使用用flex-box布局
#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}
