html图片动态特效,CSS3悬停图片动画特效

body {

background-color:#eee;

}

* {

margin:0;

padding:0;

font-family:"HPE";

}

.wrap {

margin:0 auto;

width:1000px;

max-width:1000px;

}

.tile {

width:400px;

height:300px;

margin:20px;

background-color:#99aeff;

display:inline-block;

background-size:cover;

position:relative;

cursor:pointer;

transition:all 0.4s ease-out;

box-shadow:0px 35px 77px -17px rgba(0,0,0,0.44);

overflow:hidden;

color:white;

}

.tile img {

height:100%;

width:100%;

position:absolute;

top:0;

left:0;

z-index:0;

transition:all 0.4s ease-out;

}

.tile .text {

z-index:99;

position:absolute;

padding:30px;

height:calc(100% - 60px);

}

.tile h1 {

font-weight:300;

text-shadow:2px 2px 10px rgba(0,0,0,0.3);

}

.tile h2 {

font-weight:100;

margin-top:20px;

font-style:italic;

transform:translateX(200px);

}

.tile p {

font-weight:300;

margin-top:20px;

line-height:25px;

transform:translateX(-200px);

transition-delay:0.2s;

}

.animate-text {

opacity:0;

transition:all 0.6s ease-in-out;

}

.tile:hover {

box-shadow:0px 35px 77px -17px rgba(0,0,0,0.64);

transform:scale(1.05);

}

.tile:hover img {

opacity:0.2;

}

.tile:hover .animate-text {

transform:translateX(0);

opacity:1;

}

.dots {

position:absolute;

bottom:20px;

right:30px;

margin:0 auto;

width:30px;

height:30px;

color:currentColor;

display:flex;

flex-direction:column;

align-items:center;

justify-content:space-around;

}

.dots span {

width:5px;

height:5px;

background-color:currentColor;

border-radius:50%;

display:block;

opacity:0;

transition:transform 0.4s ease-out,opacity 0.5s ease;

transform:translateY(30px);

}

.tile:hover span {

opacity:1;

transform:translateY(0px);

}

.dots span:nth-child(1) {

transition-delay:0.05s;

}

.dots span:nth-child(2) {

transition-delay:0.1s;

}

.dots span:nth-child(3) {

transition-delay:0.15s;

}