懸停和點擊如何淡出圖像和淡入淡出內容文字

Question

我正在使用JS小提琴想法JSFIDDLE來實現懸停和點擊一個div內的CSS圖像更改。

下面是我自己的代碼，我已經實現了這一點，但是淡入的圖像是文本的圖片，因爲我不知道如何淡出圖像並淡入書面內容。那麼有什麼方法可以編輯我的代碼來淡入一些內容，而不是淡入淡出另一個文本的圖像？

在此先感謝。

<div id="apDiv7"><div style="border-radius: 20px;" class="table-wrapper"> 
<div class="row row1"> 
    <div class="column"><img src="topright.png" width="400" height="300" class="img1" /></div> 
    <div class="column"><img src="topcenter.png" width="400" height="300" class="img2" /></div> 
    <div class="column"><img src="topleft.png" width="400" height="300" class="img3" /></div> 
</div> 
<div class="row row2"> 
    <div class="column"><p></p><img src="bottomleft.png" width="600" height="400" class="img4" /> </div> 
    <div class="column"><p></p><img src="bottomright.png" width="600" height="400" class="img5" /></div> 
</div> 
</div></div> 

CSS

.row:after { 
display: block; 
clear: both; 
content: ""; 
} 

.row1 .column { 
width: 33.3333%; 
} 

.row2 .column { 
width: 50%; 
} 

.column { 
top: 20px; 
float: left; 
text-align: center; 
} 
    #apDiv7 { 
position: absolute; 
width: 90%; 
height: 700px; 
left: 5%; 
background-color: #FFFFFF; 
border-radius: 20px; 
border: 8px solid #666666; 
} 

Answer 1

試試這個：JSFIDDLE

<div class="hover-img"> 
    <img src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" class="img1"/> 
    <p class="text">place holder text goes here</p> 
</div> 

.hover-img { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 
.hover-img > img { 
    position: absolute; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    z-index: 19; 
} 

.hover-img > p { 
    position: absolute; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: white; 
    margin: 0; 
    z-index: 9; 
} 

.hover-img > .img1 { 
    opacity: 1; 
    -webkit-transition: opacity 500ms ease-in-out; 
    -moz-transition: opacity 500ms ease-in-out; 
    -ms-transition: opacity 500ms ease-in-out; 
    -o-transition: opacity 500ms ease-in-out; 
    transition: opacity 500ms ease-in-out; 
} 

.hover-img > .text { 
    opacity: 0; 
    -webkit-transition: opacity 500ms ease-in-out; 
    -moz-transition: opacity 500ms ease-in-out; 
    -ms-transition: opacity 500ms ease-in-out; 
    -o-transition: opacity 500ms ease-in-out; 
    transition: opacity 500ms ease-in-out; 
} 

.hover-img:hover > .img1 { 
    opacity: 0; 
} 

.hover-img:hover > .text { 
    opacity: 1; 
} 

Answer 2

看是否有此解決方案適用於您：

HTML

<div class="hover-img"> 
    Text Goes Here 
    </div> 

CSS

.hover-img { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    background:url(http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif); 
    -webkit-transform:rotateY(180deg);/*requires vendor prefix*/ 
    -webkit-transform-style: preserve-3d;/*requires vendor prefix*/ 
    line-height:200px; 
    text-align:center; 
    font-size:0; 

} 
.hover-img:hover{ 
    -webkit-transform:rotateY(0deg);/*requires vendor*/ 
    font-size:14px; 
    color:white; 

} 

DEMO

應該使用供應商前綴的所有評論道具