how would fade an image out and fade another image in that has text?

Question

I'm relatively new at coding and I'm trying to make it so one image fades to a different image and that image has text over it.

I'm using Tumblr, so PHP-5-only MVC I'm pretty sure. And here's what I have so far:

<style>
  #imagefade {
    background-image: url('http://i65.tinypic.com/107kqbq.jpg');
    position: absolute;
  }
  #imagefade img {
    -webkit-transition: all ease 1.5s;
    -moz-transition: all ease 1.5s;
    -o-transition: all ease 1.5s;
    -ms-transition: all ease 1.5s;
    transition: all ease 1.5s;
  }
  #imagefade img:hover {
    opacity: 0;
  }
  #text {
    position: center;
  }
  .image {
    position: relative;
  }
  p {
    position: absolute;
    top: 200px;
    left: 38px;
    width: 100%;
    font-family: arial;
    font-size: 12px;
    color: white;
  }
</style>

<div id="imagefade">
  <img src="http://i68.tinypic.com/2i9s4eb.jpg" />
  <p>text heading here</p>
</div>

Answer 1

If I got it correct from what you want, the easiest way to do this is use position: absolute; and opacity on :hover to achieve this. The positioning will set the layers on top of each other and not next to each other (as in your example).

See my example below.

.container {
  background: lightblue;
  position: relative;
  width: 500px;
  height: 300px;
}

.box {
  background-image: url('https://i.imgur.com/AzeiaRY.jpg');
  background-position: center;
  position: absolute;  /* Setting the boxes on top of each other */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  transition: opacity .4s ease-in-out;   /* Transition the opacity for the :hover */
}

.image-2 {
  background-position: bottom right;
  opacity: 0;
}

.image-1:hover .image-2 {
  opacity: 1;
}


/* Pure for styling below */

.box-text {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: rgba(0, 0, 0, .8);
  width: 40%;
  height: 100%;
  box-sizing: border-box;
}

<div class="container">

  <div class="box image-1">

    <div class="box image-2">

      <div class="box-text">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsa maxime modi velit similique maiores, porro voluptate? Molestias ratione natus consequatur libero eaque
          pariatur optio quisquam minima. Nemo quis, odit.
        </p>

      </div>

    </div>

  </div>
</div>