opacity fade, non elegant solution

basic jquery non elegant solution to click change text

by Adam Kinnucane

HTML

<div class="wrapper">
  <img class="image-one" src="https://www.mrcutout.com/images/home/cut_out_trees_png.jpg">
  <img class="image-two" src="https://www.mrcutout.com/images/home/sitting_people.jpg">
  <p class="text-one">text to be displayed on click</p>
  <p class="text-two">text that is clicked when you click person 2</p>
</div>

CSS

.image-one{
  position: fixed;
  top: 0;
  left: 0;
}
.image-two{
  position: fixed;
  top: 0;
  left: 20%;
}
.text-one{
    color: blue;
    opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
    position: fixed;
    top: 40%;
    left: 0;
}
.text-two{
    color: red;
    opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
    position: fixed;
    top: 40%;
    left: 0;
}

JavaScript

$( ".image-one" ).click(function() {
     $( ".text-one" ).css( "opacity","1" );
  $( ".text-two" ).css( "opacity","0" );
});
$( ".image-two" ).click(function() {
     $( ".text-one" ).css( "opacity","0" );
  $( ".text-two" ).css( "opacity","1" );
});