在悬停和单击时如何淡出图像和淡入内容文本答案

【问题标题】：on hover and on click how to fade out image and fade in content text在悬停和单击时如何淡出图像和淡入内容文本
【发布时间】：2014-09-09 14:29:49
【问题描述】：

我正在使用 JS Fiddle 想法 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;
}

【问题讨论】：

你问过谷歌吗？
@ZerO 是的，我有，但我并没有真正理解一些教程，所以我希望有人能用简单的英语为我拼出来。我对这一切都很陌生，但愿意学习。 :)
问题不清楚。你能解释一下吗...
@Shadow 我很抱歉有什么不清楚的地方？
@user3852893，我是否正确地阅读了此内容，您希望有一个以图像开头的块，当它悬停在上面时，图像会淡出，文本会淡入？

标签： javascript jquery css animation

【解决方案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;
}

【讨论】：

【解决方案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

应该为所有注释的道具使用供应商前缀

【讨论】：