悬停和点击如何淡出图像和淡入淡出内容文字

我正在使用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; 
}

来源

2014-07-18 DanielNolan

你问谷歌？ – PKlumpp

@ZERO是的，我有，但我真的不明白一些教程，所以我希望有人能用纯英语拼出来。我对这一切都很陌生，但愿意学习。 :) – DanielNolan

问题不清楚，可否给我解释... –

试试这个：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; 
}

来源

2014-07-18 12:45:28 JRulle

看是否有此解决方案适用于您：

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

应该使用供应商前缀的所有评论道具

来源

2014-07-18 13:07:34

悬停和点击如何淡出图像和淡入淡出内容文字

回答

相关问题