Web site pictures often have a lot of results, using CSS is a more convenient way to achieve picture effects. Here are a few of the multiple effects that a CSS mouse points to:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
. Anli Li {
Float:left;
position:relative;
width:320px;
height:320px;
background-color:red;
margin-top:20px;
Overflow:hidden;
}
/* Li+li Select all <li> elements immediately after the <li> element. This refers to the latter two Li tags */
. Anli Li+li {
margin-left:20px;
}
. Mask {
Position:absolute;
top:0px;
left:0px;
width:320px;
height:320px;
Background-color:black;
opacity:0;
transition:0.8s;
Z-index:8;
}
. Anli img {
width:320px;
transition:0.8s;
Z-index:5;
position:relative;
/*height:320px;*/
}
. Anli. text{
Color:white;
Z-index:10;
Position:absolute;
top:0px;
left:0px;
padding:20px;
}
. text. move{
margin-top:245px;
transition:0.8s;
}
/* Li:hover. Move mouse over move tab animation effect */
. Anli Li:hover. move{
margin-top:80px;
}
. Anli Li:hover. move+.move{
margin-top:20px;
}
. Anli Li:hover img{
Transform:scale (1.1);
}
. Anli Li:hover. mask{
opacity:0.5;
}
</style>
<body>
<ul class= "Anli" >
<li>
<div class= "Mask" ></div>
<div class= "Text" >
<H2 class= "Move" > Qin Kai & he xian wedding <p class= "Move" > Elegant Ash + light luxury powder, weddings around the theme of "Ripples", the concept of "flowing water" is presented as a whole. </p>
<p class= "Move" > Hotel Sheraton Xian Wyndham Grand Hotel </p>
<p class= "Move" > guest 300 + </p>
</div>
</li>
<li></li>
<li></li>
</ul>
</body>
CSS Picture effects