main.js

'use strict';

;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.inputfile' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label	 = input.nextElementSibling,
			labelVal = label.innerHTML;

		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				label.querySelector( 'span' ).innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});

		// Firefox bug fix
		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
	});
}( document, window, 0 ));

main2.css

/*------------------------------------------------
Controls the page setting and Background Image
------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);

html {
    /*background-image: linear-gradient(to right , #cb2d3e , #ef473a);*/
    background: url(/static/images/dog_background.jpg);
    /*background-position: center;*/
    background-size: cover;
    background-repeat: no-repeat;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

body {
  font-family: 'Lato', sans-serif; 
}

/*------------------------------------------------
Title / Headline 
------------------------------------------------*/

.headline {
    position: absolute;
    left: 50%;
    transform:  translate(-50%,50%);
    /*background: #2f3640;*/
    height: 20px;
    border-radius: 40px;
    padding: 10px;
    color: #2f3640;
}

.title {
    top: 25%;
    font-size:40px;
    font-family: American Typewriter, serif;
}

.subtitle1 {
    top: 35%;
    font-size: 18px;
}

.subtitle2 {
    top: 52%;
    font-size: 18px;
}

/*------------------------------------------------
Second Input Box
Upload Image to find similar Image
------------------------------------------------*/

.searchBox {
    position: absolute;
    top: 44%;
    left: 50%;
    transform:  translate(-50%,50%);
    background: #2f3640;
    /*height: 40px;*/
    border-radius: 40px;
    padding: 10px;

}

.searchBox:hover > .searchInput {
    width: 240px;
    padding: 0 6px;
}

.searchBox:hover > .searchButton {
    background: white;
    fill : #2f3640;
}

.searchButton {
    /*fill: white;*/
    color: white;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.searchInput {
    border:none;
    background: none;
    outline:none;
    float:left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;

}


/*------------------------------------------------
Second Input Box
Upload Image to find similar Image
------------------------------------------------*/
/*label {
   cursor: pointer;
}*/

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    font-size: 16px;
    /*font-size: 1.25em;*/
    /*font-weight: 700;*/
    display: inline-block;

    cursor: pointer; /* "hand" cursor */
}

/*.inputfile:focus + label,
.inputfile + label:hover {
    background-color: #2f3640;
    color: lightgrey;
    border: 2px solid #2f3640;
    padding: 10px;
    border-radius: 40px;
}*/

.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
    color: #722040;
}


.uploadBox {
    background: #2f3640;
    color: lightgrey;
    border: 2px solid #2f3640;
    padding: 10px;
    border-radius: 40px;

    position: absolute;
    top: 53%;
    left: 50%;
    transform:  translate(-50%,50%);
    border-radius: 40px;
    text-anchor: center;
    text-align: center;

}

.uploadBox:hover {
    background: transparent;
    color: #2f3640;
    border: 2px solid currentColor;
    padding: 10px;
    border-radius: 40px;
    fill: #2f3640;
}

.uploadButton { 
    background: lightgrey;
}

.uploadButton:hover { 
    cursor: pointer;
}

/*------------------------------------------------
Button to go back to main page
------------------------------------------------*/

.backHome{
    position: absolute;
    top: 85%;
    left: 50%;
    transform:  translate(-50%,50%);
    /*background: #2f3640;*/
    height: 20px;
    border-radius: 40px;
    padding: 10px;
    color: #2f3640;
    font-family: American Typewriter, serif;
    font-size:15px;
}

/*------------------------------------------------
Setting for Image Result page
------------------------------------------------*/

.image-title {
    position: absolute;
    top: 10%;
    left: 50%;
    transform:  translate(-50%,50%);
    /*background: #2f3640;*/
    height: 20px;
    border-radius: 40px;
    padding: 10px;
    color: #2f3640;
    font-family: American Typewriter, serif;
    font-size:35px;
    text-align: center;
}

.image-subtitle {
    position: absolute;
    top: 17%;
    left: 50%;
    transform:  translate(-50%,50%);
    /*background: #2f3640;*/
    height: 20px;
    border-radius: 40px;
    padding: 10px;
    color: #2f3640;
    font-family: American Typewriter, serif;
    font-size:20px;
    text-align: center;
}

.image-result{
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform:  translate(-50%,50%);
    height: 350px;
    border-radius: 40px;
    padding: 10px;
}

.carousel {
  max-height: 500px;
  overflow: hidden;

  .item img {
    width: 100%;
    height: auto;
  }
}

.carousel-caption {
    top: 0;
    bottom: auto;
}

/* -------------------------------------------------
Displaying side by side images for cosine similarity
-------------------------------------------------*/

.image-result_ori{
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform:  translate(-100%,50%);
    height: 350px;
    border-radius: 40px;
    padding: 10px;
}

.image-result_sim{
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform:  translate(0%,50%);
    height: 350px;
    border-radius: 40px;
    padding: 10px;
}

@media screen and (max-width: 620px) {
.searchBox:hover > .searchInput {
    width: 150px;
    padding: 0 6px;
}
.uploadBox:hover > .uploadInput {
    width: 150px;
    padding: 0 6px;
}
}