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

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

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

2 个答案: