css hover出现文字,hover显示文字

矫情吗；* 2022-09-02 14:52 371阅读 0赞

Simple Tile Hover Effect

.tiles \{

width: 1040px;

font-size: 0;

text-align: center;

position: absolute;

top: 50%;

left: 50%;

\-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

.tiles .tile \{

display: inline-block;

margin: 10px;

text-align: left;

opacity: .99;

overflow: hidden;

position: relative;

border-radius: 3px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);

.tiles .tile:before \{

content: '';

background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

width: 100%;

height: 50%;

opacity: 0;

position: absolute;

top: 100%;

left: 0;

z-index: 2;

\-webkit-transition-property: top, opacity;

transition-property: top, opacity;

\-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

.tiles .tile img \{

display: block;

max-width: 100%;

backface-visibility: hidden;

\-webkit-backface-visibility: hidden;

.tiles .tile .details \{

font-size: 16px;

padding: 20px;

color: \#fff;

position: absolute;

bottom: 0;

left: 0;

z-index: 3;

.tiles .tile .details span \{

display: block;

opacity: 0;

position: relative;

top: 100px;

\-webkit-transition-property: top, opacity;

transition-property: top, opacity;

\-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

\-webkit-transition-delay: 0s;

transition-delay: 0s;

.tiles .tile .details .title \{

line-height: 1;

font-weight: 600;

font-size: 18px;

.tiles .tile .details .info \{

line-height: 1.2;

margin-top: 5px;

font-size: 12px;

.tiles .tile:focus:before,

.tiles .tile:focus span, .tiles .tile:hover:before,

.tiles .tile:hover span \{

opacity: 1;

.tiles .tile:focus:before, .tiles .tile:hover:before \{

top: 50%;

.tiles .tile:focus span, .tiles .tile:hover span \{

top: 0;

.tiles .tile:focus .title, .tiles .tile:hover .title \{

\-webkit-transition-delay: 0.15s;

transition-delay: 0.15s;

.tiles .tile:focus .info, .tiles .tile:hover .info \{

\-webkit-transition-delay: 0.25s;

transition-delay: 0.25s;

![019c320e3f59576fb33536b957da49f7.png][]

Lorem Ipsum Dolor Quisque vel felis lectus donec vitae dapibus magna

![a4a1ceb1bdf4a18fd7528262c3377b72.png][]

Lorem Ipsum Dolor Quisque vel felis lectus donec vitae dapibus magna

![aeca7fb0450ce21b13180c9de7c2966e.png][]

Lorem Ipsum Dolor Quisque vel felis lectus donec vitae dapibus magna

![157359b4d0b541eb4f7fa5b97357f62e.png][]

Lorem Ipsum Dolor Quisque vel felis lectus donec vitae dapibus magna

提示：你可以先修改部分代码再运行。

[019c320e3f59576fb33536b957da49f7.png]: /images/20220829/009f7af603e14b0384195b4d25f27fdc.png
[a4a1ceb1bdf4a18fd7528262c3377b72.png]: /images/20220829/cabadc518a924d36a5f9c83a08fd2372.png
[aeca7fb0450ce21b13180c9de7c2966e.png]: /images/20220829/adbfa0ed35fa426bb98ba315f86bcdce.png
[157359b4d0b541eb4f7fa5b97357f62e.png]: /images/20220829/c709875deb4245edb78eac238b649c20.png