html图片悬浮时变大,CSS3 图片悬停时放大、渐变模糊和字体间距变大

CSS

语言：

CSSSCSS

确定

@import url("http://fonts.googleapis.com/css?family=Roboto:300,400");

a {

text-decoration: none;

color: #fff;

}

.eat {

background-image: url("http://static6.therichestimages.com/cdn/864/585/90/cw/wp-content/uploads/3188.jpg");

}

.drink {

background-image: url("http://static6.therichestimages.com/cdn/864/585/90/cw/wp-content/uploads/3188.jpg");

}

.play {

background-image: url("http://static6.therichestimages.com/cdn/864/585/90/cw/wp-content/uploads/3188.jpg");

}

.relax {

background-image: url("http://static6.therichestimages.com/cdn/864/585/90/cw/wp-content/uploads/3188.jpg");

}

ul {

font-family: 'Roboto', sans-serif;

text-align: center;

letter-spacing: 0.1em;

}

ul li {

float: left;

width: 50%;

height: 200px;

overflow: hidden;

}

ul li a {

position: relative;

display: block;

height: 100%;

width: 100%;

background-repeat: no-repeat;

background-position: center center;

/* box-shadow inset 0 0 0 1px #000 */

background-size: 100% auto;

-webkit-transition: all 1s ease-in-out;

transition: all 1s ease-in-out;

}

ul li a:hover {

letter-spacing: 0.2em;

text-shadow: 0 0 10px #000;

background-size: 120% auto;

background-color: rgba(255, 127, 80, 0.5);

z-index: 999;

}

ul li a span {

text-transform: uppercase;

position: absolute;

text-align: center;

top: 50%;

left: 50%;

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

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

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

z-index: 10;

}

ul li a span h1 {

font-size: 2em;

font-weight: 400;

}

ul li a span p {

font-weight: 300;

}

ul li a .tint {

position: absolute;

width: 100%;

height: 100%;

z-index: 0;

background: rgba(100, 149, 237, 0.5);

-webkit-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

ul li a .tint:hover {

background: rgba(0, 128, 128, 0.5);

}