JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="frame">
  <div class="imgwrap">
    <div class="fade">
    <img src="http://i.imgur.com/7zfqoYw.jpg"/>
    <img src="http://i.imgur.com/Nwz97Qt.jpg"/>
    <img src="http://i.imgur.com/inXJQNZ.jpg"/>
    </div>
  </div>
</div>
<div id="textform">
<FORM NAME="joe">
<INPUT TYPE="text" WIDTH="100" NAME="burns" VALUE="Picture One [TEXT]">
</FORM>
</div>

CSS

body{
  background:Lavender;
  width:100%;height:100%;
  margin:0;padding:0;
}
.fade { position:relative; height:100%; width:100%; }
.fade img { position:absolute; left:0; top:0; }

#frame{
  position:relative;
  padding:20px;
  border:1px solid #fff;
  margin:200px auto;
  background:#cecece;
  width:400px;
  height:400px;
}
#textform{
  position:relative;
  border:1px solid #fff;
  margin: -190px auto;
  background:#cecece;
  width:400px;
}
form[name=joe]{
  text-align:center;
}
.imgwrap{
  width:100%;
  height:100%;
  padding:0 0 0 3px;
}

img{
  width: 390px;
  height: 390px;
  border-radius:5px;
  border:1px solid #eee;
      transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
      -webkit-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
      -moz-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
      -o-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
      -ms-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out;
}
img:hover{
  width: 405px;
  height: 405px;
  margin: -1% 0% 0% -1.5%;
}

JavaScript

$(function SlideShow(){
    $('.fade:first-child').appendTo('.fade');
    setInterval(function(){
        $('.fade :first-child').appendTo('.fade').hide().fadeIn(2000).end();
        textSlideShow()
    },4000);
});

var num=1;
text1 = "Picture One [TEXT]"
text2 = "Picture Two [TEXT]"
text3 = "Picture Three [TEXT]"

    function textSlideShow()
    {
        num=num+1
        if (num>3) num=1;
        $('input[NAME=burns]').val(window['text'+num])
    }