困惑的CSS3如何顯示文本

Question

嗨，先關閉這是我codepen http://codepen.io/willc86/pen/unjzG

差不多就是我想要做的就是翻轉每個圖像，揭示了「鏈接」着我，給我發電子郵件，位置等等。只是爲了好玩而學習它。我一直在嘗試在網上找到資源，但是它太高級了，我不明白他們在做什麼，或者代碼不完整。

想知道是否有人可以給我看一個翻轉圖像上的樣本或資源，它會顯示文本或者是否需要JS？

Answer 1

請按照下面的鏈接，在實施例隨着演示

Hover Effect to Display Text

Working Example

.view { 
width: 300px; 
height: 200px; 
margin: 10px; 
float: left; 
border: 10px solid #fff; 
overflow: hidden; 
position: relative; 
text-align: center; 
box-shadow: 1px 1px 2px #e6e6e6; 
cursor: default; 
background: #fff url(../images/bgimg.jpg) no-repeat center center 
} 
.view .mask, .view .content { 
width: 300px; 
height: 200px; 
position: absolute; 
overflow: hidden; 
top: 0; 
left: 0 
} 
.view img { 
display: block; 
position: relative 
} 
.view h2 { 
text-transform: uppercase; 
color: #fff; 
text-align: center; 
position: relative; 
font-size: 17px; 
padding: 10px; 
background: rgba(0, 0, 0, 0.8); 
margin: 20px 0 0 0 
} 
.view p { 
font-family: Georgia, serif; 
font-style: italic; 
font-size: 12px; 
position: relative; 
color: #fff; 
padding: 10px 20px 20px; 
text-align: center 
} 
.view a.info { 
display: inline-block; 
text-decoration: none; 
padding: 7px 14px; 
background: #000; 
color: #fff; 
text-transform: uppercase; 
box-shadow: 0 0 1px #000 
} 
.view a.info:hover { 
box-shadow: 0 0 5px #000 
} 

希望這有助於。