html结构
<div class="bride-grids">
<div class="container">
<div class="col-md-4 bride-grid">
<div class="content-grid l-grids">
<figure class="effect-bubba">
<img src="images/b1.jpg" alt="" />
<figcaption>
<h4>Nullam molestie </h4> in tincidunt labore et dolore magna aliqua</p>
</figcaption>
</figure>
<div class="clearfix"></div>
<h3>Wedding Dresses</h3>
</div>
</div>
</div>
</div>
css样式-------scale（0，1）和translate3d（0，200px，0）
.l-grids figure {
position: relative;
width: 400px;
cursor: pointer;
/*overflow: hidden;*/
text-align: center;
}
.l-grids figure img {
display: block;
width: 100%;
position:relative;
}
.effect-bubba {
background: #00a0dc;
}
.effect-bubba:hover img {
opacity: 0.3;
}
figcaption {
padding: 2em;
color: #fff;
font-size: 1.25em;
backface-visibility: hidden;
}
figcaption::before,
figcaption::after {
pointer-events: none;
}
figcaption {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
figcaption::before,
figcaption::after{
position: absolute;
top: 30px;
right: 30px;
left: 30px;
bottom: 30px;
content: "";
opacity: 0;
transition: opacity 0.35s,transform 0.35s;
}
figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
transform: scale(1,0);
}
h4 {
padding-top: 12%;
transition: transform 0.35s;
transform:translate3d(0,-20px,0);
opacity: 0;
}
p {
padding: 15px 1em;
opacity: 0;
transition: opacity 0.35s,transform 0.35s;
font-size: 0.8em;
transform: translate3d(0,20px,0);
}
figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
transform: scale(1);
}
figure.effect-bubba:hover h4,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.content-grid {
margin-bottom: 2.5em;
}
.content-grid h3{
margin-top:0.8em;
font-size:1.8em;
font-family: 'JosefinSans-Light';
}
原生css写法，不用c3
<style type="text/css">
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
width: 0;
height: 1px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
width: 100%;
}
</style>
</head>
<body>
<div id="underline"></div>