效果图：
html部分：
<!DOCTYPE html>
<html lang=
"en">
<head>
<title>css动态效果</title>
<meta name=
"viewport" content=
"width=device-width, initial-scale=1">
<meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
<link href=
"css/bootstrap.css" rel=
"stylesheet" type=
"text/css" media=
"all" />
<link href=
"css/style.css" rel=
"stylesheet" type=
"text/css" media=
"all" />
</head>
<body>
<!--gallery-->
<div class=
"gallery" id=
"gallery">
<div class=
"container">
<div class=
"w3layouts-heading">
<h3>Our Work</h3>
</div>
<div class=
"w3ls_gallery_grids">
<div class=
"col-md-4 w3_agile_gallery_grid">
<div class=
"agile_gallery_grid">
<a href=
"images/g1.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g1.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
<div class=
"agile_gallery_grid">
<a href=
"images/g2.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g2.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
<div class=
"agile_gallery_grid">
<a href=
"images/g3.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g3.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
</div>
<div class=
"col-md-4 w3_agile_gallery_grid">
<div class=
"agile_gallery_grid">
<a href=
"images/g4.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g4.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
<div class=
"agile_gallery_grid">
<a href=
"images/g5.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g5.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
<div class=
"agile_gallery_grid">
<a href=
"images/g6.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g2.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
</div>
<div class=
"col-md-4 w3_agile_gallery_grid">
<div class=
"agile_gallery_grid">
<a href=
"images/g7.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g7.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
<div class=
"agile_gallery_grid">
<a href=
"images/g8.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g8.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
<div class=
"agile_gallery_grid">
<a href=
"images/g9.jpg">
<div class=
"agile_gallery_grid1">
<img src=
"images/g9.jpg" alt=
" " class=
"img-responsive" />
<div class=
"w3layouts_gallery_grid1_pos">
<h3>热情，创新</h3>
<p>激情，满意，精益求精</p>
</div>
</div>
</a>
</div>
</div>
<div class=
"clearfix"></div>
</div>
</div>
</div>
<!--//gallery-->
</body>
</html>
css部分：
.agile_gallery_grid{
margin-top:2em
;
}
.w3_agile_gallery_grid .agile_gallery_grid:nth-child(1) {
margin-top: 0!important
;
}
.agile_gallery_grid1 {
position: relative
;
box-shadow: -7px 7px 17px
rgba(158, 156, 156, 0.59
);
}
.w3layouts_gallery_grid1_pos {
background: rgba(0, 0, 0, 0.73
);
bottom: 45px
;
left: 45px
;
opacity: 0
;
padding: 1em
;
position: absolute
;
right: 45px
;
text-align: center
;
top: 45px
;
visibility: hidden
;
-webkit-transform: scaleX(-1
);
transform: scaleX(-1
);
-moz-transform: scaleX(-1
);
-o-transform: scaleX(-1
);
-ms-transform: scaleX(-1
);
-webkit-transition: all 0.8s ease
;
transition: all 0.8s ease
;
}
.w3layouts_gallery_grid1_pos h3 {
font-size: 1.2em
;
letter-spacing: 2px
;
font-weight: 600
;
margin: 1em 0 .5em
;
padding-bottom: .5em
;
position: relative
;
text-transform: capitalize
;
color: #ffffff
;
font-family: 'Poiret One', cursive
;
}
.w3layouts_gallery_grid1_pos h3:after {
background: #fd6900
;
bottom: -4px
;
content: '';
height: 2px
;
left: 35.5%
;
position: absolute
;
width: 65px
;
}
.w3layouts_gallery_grid1_pos p {
color: #00affe
;
margin-top: 1.5em
;
font-size: 14px
;
letter-spacing: 1px
;
}
.agile_gallery_grid:hover .w3layouts_gallery_grid1_pos{
opacity: 1
;
visibility: visible
;
-webkit-transform: scaleX(1
);
transform: scaleX(1
);
-moz-transform: scaleX(1
);
-o-transform: scaleX(1
);
-ms-transform: scaleX(1
);
}
