caption.css
li#figure{
display: block;
position: relative;
overflow: hidden;
width: 200px;
}
#cap-one {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
transition: 0.5s;
opacity: 0;
}
#figure:hover #cap-one {
opacity: 1;
}
h3, p {
padding: 10px;
color: #FFF;
}
li#figure2 {
position: relative;
overflow: hidden;
width: 200px;
}
#cap-two {
position: absolute;
top: -100%;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
transition: 0.3s;
opacity: 1;
}
#figure2:hover #cap-two {
top: 0;
left: 0;
}
CSSのみで実装するキャプションエフェクト 20 | NxWorld