Two small ways to show picture content hiding and mouse over picture hidden content display

1. Mouse-over display pictures, content hidden, the following with a small calendar practice show

<div class= "Date7">

<a href="" ><div class="date7a" ><span Class="Abcabc" >30</span></div></a>

<a href= "" > <div class= "date7a" >< span class= "ABCABC" >31</ span></div></A>

<a href= "" > <div class= "date7a" >< span class= "ABCABC" >1</ span></div></A>

<a href="" ><div class="date7a" ><span class ="Abcabc" >2</span></div></a>

</div>

. Date7{

Width: 302px;

Height: px;

Margin-top: .

Margin-left: px;

}

. Date7 . date7a{

Width: px;

Height: px;

Background: RGB(+,-);

Float: left;

Text-align: Center;

Line-height: px;

Margin-right: 2px;

Margin-bottom: 2px;

}

. Date7 . date7a: hover{

Background: URL (... /img/xiezi.png);

}

. Date7 . date7a: hover . abcabc{

Display: none;

}

Need code to try the words to change a picture, the above is to build four Div to the center of color and number, and then click on the mouse to set the div for Display:none; Given the background picture, the desired effect appears.

Here's the second effect

<div class= "MainFirst">

<a href="#" >

<div class= "Fristphoto"> /c16>

<div class="Fontone" > /c4>

<span>

netease <br/>

netease 520 Game Gift Pack h5</span>

</div>

<div class= "Date">

netease 520 Game Gift Pack

</div>

</div>

</a>

</div>

The CSS is as follows:

. MainFirst{

Width: %;

Height: 243px;

Float: left;

Margin-left: px;

Margin-right: px;

}

. MainFirst . Fristphoto{

Width: %;

Height: 206px;

background: url (... /img/center1.jpg) no-repeat;

Background-size: % of ;

}

. MainFirst A span{

Width: %;

Height: 106px;

color: white;

Display: none;

Padding-top: + px;

}

. MainFirst a: hover span{

Display: block;

}

. MainFirst: Hover a span{

Display: block;

Background-color: rgba(N, A,0.5);

}

. MainFirst . Fontone{

Width: %;

Height: 206px;

Text-align: Center;

}

. Date{

Width: %;

Height: notoginsengpx;

Background-color: White ;

Text-align: Center;

color: gray;

}

. MainFirst: hover . Date{

color: black;

}

The picture also changes itself

I am also just beginning to learn, hope that the wrong place the great God more guidance, also hope to just learn the friend can help.

Just came to the blog park, I hope you have a lot of attention

Two small ways to show picture content hiding and mouse over picture hidden content display