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

Question

I am using a JS Fiddle idea JSFIDDLE to implement a css image change within a div on hover and on click.

Below is my own code in which I have implemented this, however the image that fades in is a picture of text as I do not know how to fade out an image and fade in written content. So is there any way to edit my code to fade in some content instead of fading in another image of text?

Thanks in advance.

   <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

Try this: 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

See if this solution works for you:

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

Should use vendor prefixes for the all the commented props