We Keep Coding

Making a div element show using jquery doesnot last long

Here i have a jquery function that displays the #showhide div element after successful login but the #showhide displays for a second or two and disappears from the screen Could some one tell me why is this happening! please!
I have posted the entire code! cause some people might ask for it! if its confusing just check in css I have #showhide as display:none and im trying to make it show again in Jquery after authenticating but its not showing for more than 2 seconds thats the only problem in this code
myfunction = function() {
$('#text-hide').show();
}
myfunction2 = function() {
$('#photo-hide').show();
}
validate_logincredentials = function() {
var email = document.getElementById("email").value;
var pass = document.getElementById("pass").value;
var atposition = email.indexOf("#");
var dotposition = email.lastIndexOf(".");
if (atposition < 1 || (dotposition - atposition < 2))
/* if user gives email which starts with # or if there is no words inbetween (#) and (.) */
{
alert("Please enter correct email ID");
} else if (pass.length < 8) {
alert("Incorrect password");
} else if (email !== "faizalsharn#yahoo.com" && pass !== "faizalwddm12") {
alert("incorrect credentials")
} else {
alert(email);
alert(pass);
alert("User login Successfull");
$('#login-form').hide();
$('#showhide').show();
}
}
#showhide {
transition-delay: 3s;
display: none;
}
html, body {
margin: 0%;
padding: 0%;
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 5%;
background-color: black;
color: white;
float: left;
}
header h3 {
margin: 5%;
font-family: Georgia, 'Times New Roman', Times, serif;
float: left;
position: relative;
margin-top: .5%;
margin-right: 2%;
}
header h3:hover {
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px red;
}
header p:hover {
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#logo {
width: 3%;
height: 100%;
margin-left: 1%;
display: inline;
float: left;
margin-right: -5%;
}
#icons * {
color: white;
display: inline;
float: left;
margin: .5% 2% 0% 2%;
padding: 0% 2% 0% 2%;
}
#icons p {
margin-left: 50% !important;
margin-top: -25% !important;
}
nav {
width: 17%;
height: 90%;
float: left;
float: left;
}
nav img {
position: relative;
width: 50%;
height: 15%;
margin-left: 5%;
margin-top: 3%;
margin-bottom: 5%;
float: left;
}
#text-hide {
display: none;
}
#photo-hide {
display: none;
}
#text-hide span {
padding: 5%;
margin-left: 5%;
}
#photo-hide img {
width: 37%;
padding: 5%;
margin: -5%;
float: left;
margin-right: 0%;
margin-bottom: 2%;
margin-top: 5%;
margin-left: 1%;
}
#profileinfo i {
margin-top: 1%;
padding: 6%;
display: inline;
margin-left: -1%;
width: 50%;
height: 50%;
float: left;
margin-right: -30%;
}
#profileinfo h4 {
display: inline;
margin-right: -10%;
font-size: 80%;
margin-left: -10%;
float: left;
margin-top: 8%;
}
#profileinfo img {
width: 40%;
height: 40%;
float: left;
}
aside {
float: right;
width: 17%;
height: 90%;
}
aside h2 {
margin-left: 5%;
}
aside h3 {
margin-left: 10%;
}
aside img {
width: 50%;
height: 50%;
float: left;
margin-left: 10%;
}
aside p {
float: left;
margin-left: 5%;
}
main {
width: 66%;
height: 90%;
float: left;
position: relative;
}
#status {
border: 1px solid gray !important;
width: 80%;
height: 5%;
margin-left: 3%;
}
#content {
margin-top: 5%;
margin-left: 1%;
}
#content img {
width: 7%;
}
#content h4 {
display: inline;
}
footer {
bottom: 0px;
width: 100%;
height: 5%;
float: left;
background-color: black;
color: white;
padding-top: 1%;
}
#ad {
margin-left: 23%;
margin-right: 0%;
}
.fa-audio-description {
margin-top: .25%;
}
.button {
background-color: white;
/* background color of the button */
border: none;
/* no border for the button */
padding: 8px 16px 8px 16px;
/*distance between element's content and its borders. top right bottom left */
text-align: center;
display: inline-block;
font-size: 16px;
/* font size inside button */
margin: 16px 4px 12px 8px;
/*create space around elements by outer border */
transition-duration: 0.4s;
/* defines the speed of the transfomation effect */
cursor: pointer;
/*cursor changes to pointer shape when its on top of the button */
box-shadow: 0 9px #999;
/* TO GIVE SHADOW TO THE BUTTON */
color: black;
/* text of the font inside the button which says "green blue etc */
}
.button:active {
transform: translateY(4px);
/* TO GIVE THE BUTTON PRESSED FEEL TO THE USER i.e it makes the button move y-axis (or move down) by 4px */
}
.button1 {
border: 2px solid #4CAF50;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button1:hover {
background-color: #4CAF50;
/* WHEN WE HOVER BG COLOR OF BUTTON CHANGES TO #4CAF50 ( WHICH IS GREEN) */
}
.button2 {
border: 2px solid #f44336;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
/*defines space in between dashes in the stroke.*/
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button2:hover {
background-color: #f44336;
}
.button3 {
border: 2px solid #008CBA;
border-radius: 8px;
stroke-width: 5;
stroke-dasharray: 10;
transition: all 1.5s ease-out;
/* the speed at which the effect of hover should take place */
}
.button3:hover {
background-color: #008CBA;
}
#profileinfo h4:hover {
color: rgba(5, 5, 5, 0.3);
font-style: italic;
/*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#profileinfo h3:hover {
color: rgba(224, 19, 19, 0.3);
font-style: italic;
/*font changes to italic, if you want to change it to bold change the command to "font-weight:bold;"*/
TEXT-TRANSFORM: UPPERCASE;
text-shadow: 4px 4px 8px blue;
}
#text-hide span:hover {
color: rgba(0, 0, 0, 0.3);
font-style: italic;
text-shadow: 4px 4px 8px blue;
}
#content p:hover {
color: rgba(0, 0, 0, 0.3);
TEXT-TRANSFORM: capitalize;
text-shadow: 4px 4px 8px blue;
}
#photo-hide img:hover {
display: inline-block;
margin-right: 2px;
/* left and right margin of flex elements inside this element container */
margin-left: 2px;
animation: roll 3s infinite;
transform: rotate(30deg);
text-indent: 25px;
}
#keyframes roll {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#logo:hover {
animation: roll 3s infinite;
transform: rotate(30deg);
}
/*larger screen computers*/
#media screen and (min-width:1620px)
/*for screen width 1600 and above */
{
/*need to increase the image and font sizes*/
body {
font-size: 150%;
}
.button {
padding: 16px 32px 16px 32px;
margin: 32px 8px 24px 32px;
box-shadow: 0 12px #999;
}
#status {
font-size: 140%;
}
#photo-hide img {
width: 50%;
height: 50%;
margin-top: 1%;
}
aside img {
width: 70%;
height: 70%;
}
#profileinfo img {
width: 50%;
height: 50%;
}
#content img {
width: 10%;
}
#profileinfo i {
margin-right: -35%;
}
#profileinfo h4 {
display: inline;
margin-right: -10%;
font-size: 80%;
margin-left: -10%;
float: left;
margin-top: 8%;
}
#status {
height: 4%;
}
}
/*tablet*/
#media screen and (max-width:960px)
/* for screen size 960 and below */
{
header {
width: 40%;
height: 50%;
float: left;
overflow: auto;
}
header h3 {
margin: 2.5%;
margin-top: .25%;
margin-bottom: 25%;
}
/**/
#icons i {
padding: 45%;
margin-left: -25%;
}
#icons p {
margin-left: -50%;
font-size: 55%;
padding-right: 20%;
}
#icons i:hover {
text-shadow: 4px 4px 8px blue;
}
#status {
height: 3%;
}
main {
width: 100%;
}
nav {
width: 60%;
height: 50%;
float: left;
}
#profileinfo img {
width: 30% !important;
height: auto;
}
aside {
width: 100%;
}
footer {
width: 100%;
height: 10%;
float: left;
bottom: 0px;
}
body {
font-size: 100%;
}
.button {
padding: 4px 8px 4px 8px;
font-size: 8px;
margin: 30px 2px 6px 4px;
box-shadow: 0 4px #999;
}
#status {
font-size: 70%;
}
#photo-hide img {
width: 25%;
height: 20%;
margin-top: -4%;
margin-right: 10%;
}
aside img {
width: 20%;
height: 20%;
}
/**/
#profileinfo img {
width: 20%;
height: 15%;
}
#content img {
width: 20%;
}
#profileinfo i {
margin-right: -18%;
margin-bottom: -10%;
}
#profileinfo h4 {
display: inline;
margin-right: -40%;
font-size: 50%;
margin-left: -30%;
float: left;
margin-top: 8.5%;
}
#tomove {
margin-top: 50%;
margin-left: -65%;
}
#text-hide span {
font-size: 70%;
margin-right: 10%;
}
#logo {
width: 25%;
height: 10%;
margin: 10%;
}
aside h3 {
margin-left: 5%;
padding: 5%;
margin-top: 10%;
}
.fa-audio-description {
margin-top: 2%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>facechat</title>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="form.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel='stylesheet'>
<!-- for boot strap icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="login-form">
<!-- gives the toggle effect between login and register -->
<input type="radio" checked id="login" name="switch" class="hide">
<input type="radio" id="signup" name="switch" class="hide">
<!-- bootstrap icons that does not require download or install-->
<div>
<ul class="form-header">
<li><label for="login"><i class="fa fa-unlink"></i> LOGIN</label></li>
<li><label for="signup"><i class="fa fa-credit-card"></i> REGISTER</label></li>
</ul>
</div>
<div class="section-out">
<section class="login-section">
<div class="login">
<form action="">
<!-- on login i have to put the url of the backend class to handle it -->
<ul class="ul-list">
<li><input type="email" required class="input" placeholder="Email ID" id="email" /><span class="icon"><i class="fa fa-user-secret" style="font-size:20px"></i></span></li>
<li><input type="password" required class="input" placeholder="Password" id="pass" /><span class="icon"><i class="fa fa-lock" style="font-size:20px"></i></span></li>
<li><span class="remember"><input type="checkbox" id="check"> <label for="check">Remember Me</label></span><span class="remember">Forgot Password</span></li>
<!-- on forgot password i have to put the url of the backend class to handle it -->
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()" /></li>
</ul>
</form>
</div>
</section>
<section class="signup-section">
<div class="login">
<form action="">
<!-- on registration i have to put the url of the backend class to handle it -->
<ul class="ul-list">
<li><input type="text" required class="input" placeholder="Your Name" id="R_name" /><span class="icon"><i class="fa fa-user" style="font-size:20px"></i></span></li>
<li><input type="number" required class="input" placeholder="Your Number (no plus or minus signs)" id="R_number" pattern="('^\\d+$')" title="Must contain only numbers" required/><span class="icon"><i class="fa fa-mobile-phone" style="font-size:25px"></i></span></li>
<li><input type="email" required class="input" placeholder="Your Email" id="R_email" /><span class="icon"><i class="fa fa-envelope" style="font-size:15px"></i></span></li>
<li><input type="password" placeholder="Password" required class="input" id="R_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
<li><input type="password" placeholder="Retype Password" required class="input" id="Rc_pass" pattern="(?=.*?[0-9]).{8,}" title="Must contain at least one number and at least 8 or more characters" required/><span class="icon"><i class="fa fa-lock" style="font-size:20px" ></i></span></li>
<li><input type="checkbox" id="check1"> <label for="check1">I accept terms and conditions</label></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
</ul>
</form>
</div>
</section>
</div>
</div>
<div id="showhide">
<header>
<img id="logo" src="images/Captureimg.PNG" alt="logo">
<h3>Blake wood</h3>
<div id="icons">
<a href="#"><i class="fa fa-home"></i>
<p>Home</p></a>
<a href="#"><i class="fa fa-globe"></i>
<p>News</p></a>
<a href="#"> <i class="fa fa-envelope"></i>
<p>Message</p></a>
<a href="#"> <i class="fa fa-bell"></i>
<p>Notification</p></a>
</div>
</header>
<nav>
<div id="profileinfo">
<img src="images/blake.jpg" alt="profilepic" />
<i class="fa fa-suitcase"></i>
<h4>Designer-UI</h4>
<i class="fa fa-home"></i>
<h4>Ontario-CA</h4>
<i class="fa fa-birthday-cake"></i>
<h4>July-26-1991</h4>
</div>
<div id="friends">
<button id="tomove" class="button button3" onclick="myfunction()"><i class="fa fa-users fa-fw"></i> My Friends</button>
<div id="text-hide">
<span>Gafur</span><span>Vinoth</span></br><span>Azeek</span><span>Azad</span>
</div>
</div>
<div id="photos">
<button class="button button3" onclick="myfunction2()"> <i class="fa fa-circle-o-notch fa-fw"></i> Photos</button>
<div id="photo-hide">
<img src="images/slider_1.png" alt="my photo1">
<img src="images/slider-2.png" alt="my photo2">
<img src="images/slider-3.png" alt="my photo3">
<img src="images/silder-4.png" alt="my photo4">
</div>
</div>
</nav>
<main>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider_1.png" alt="sliderimage1" />
</li>
<li>
<img src="images/slider-2.png" alt="sliderimage2" />
</li>
<li>
<img src="images/slider-3.png" alt="sliderimage3" />
</li>
<li>
<img src="images/silder-4.png" alt="sliderimage4" />
</li>
</ul>
</div>
<input type="text" id="status" contenteditable="true" value="Good Morning!" />
<button class="button button3"><i class="fa fa-pencil"></i>Post</button>
<div id="content">
<img src="images/carlos.jpg" alt="Avatar">
<h4>Carlos</h4> <span>(17 min ago)</span>
<p>The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it :)
</p>
<button class="button button3"><i class="fa fa-thumbs-up"></i> Like</button>
<button class="button button3"><i class="fa fa-comment"></i> Comment</button>
</div>
</main>
<aside>
<div>
<h2>Friend Requests</h2>
<h3>Carlos</h3>
<img src="images/carlos.jpg" alt="Avatar">
<button class="button button1"><i class="fa fa-check"></i>Accept</button>
<button class="button button2">Decline<i class="fa fa-remove"></i></button>
<br></br>
<h3>Cathrine</h3>
<img src="images/cathrine.png" alt="Avatar">
<button class="button button1"><i class="fa fa-check"></i>Accept</button>
<button class="button button2">Decline<i class="fa fa-remove"></i></button></br>
</div>
</aside>
<footer>
<i id="ad" class="fa fa-audio-description"></i><span> If you like my work on photoshop css,js,jquery and wish to hire me part time, contact me # faizalsharn#yahoo.com <i class="fa fa-hand-peace-o"></i></span>
</footer>
</div>
</body>
</html>

because you are not going to server you don't need submit button. so if you need input type="submit" then you need to retrun false from every function here you are trying to validate.
else change these lines...
<li><input type="submit" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="submit" value="SIGN UP" class="btn" onclick="validate2()"></li>
to this.
<li><input type="button" value="SIGN IN" class="btn" onclick="validate_logincredentials()"/></li>
<li><input type="button" value="SIGN UP" class="btn" onclick="validate2()"></li>
everything will be fine.

Hover effect on google font icon disappearing

Hover effect on google font icon disappearing when trying to reach a link embedded in it. I implemented a similar concept but on image and it works perfectly. Pretty sure I am going wrong somewhwere in CSS
$('#LanguageQ').hover(function(){
$('.customtooltip').show();
}, function(){
$('.customtooltip').hide();
});
.customtooltip{
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position:absolute;
left:12%;
width: 36%;
font-size: 0.8vw;
display:none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
<div class="customtooltip">Can't find your language? Please contact us</div>
<div class="mandatory">
<div class="Input-icon material-icons"
id="LanguageQ">help_outline</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory"
list="huge_list" placeholder="Languages">
</div>
Expected:
I need to be able to go to the link when the hover text appears.
What I have tried so far:
Created a hidden div to increase the area of the hover able area (can add the code if required)
Any help or pointers will be appreciated. Thanks

Place the .customtooltip div after #LanguageQ div. This is necessary for the css code #LanguageQ:hover + .customtooltip {display: block;} to work.
Make the .customtooltip class's width: 100%;. Or change it's width/position as necessary.
Delete the jQuery code. I'm giving you a css only solution.
Add the following css:
#LanguageQ:hover + .customtooltip {
display: block;
}
.customtooltip:hover {
display: block;
}
.customtooltip{
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position:absolute;
left:12%;
width: 100%;
font-size: 0.8vw;
display:none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
#LanguageQ:hover + .customtooltip {
display: block;
}
.customtooltip:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div>
<div class="mandatory">
<div class="Input-icon material-icons"
id="LanguageQ">help_outline</div>
<div class="customtooltip">Can't find your language? Please contact us</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory"
list="huge_list" placeholder="Languages">
</div>

You can achieve this through many ways, one way is this:
$('.contain').hover(function() {
$('.customtooltip').show();
}, function() {
$('.customtooltip').hide();
});
.customtooltip {
background-color: #666666 !important;
color: #E7E7E7;
padding: 5px;
z-index: 3;
position: absolute;
left: 20%;
width: 75%;
font-size: 0.8vw;
display: none;
cursor: pointer;
}
div.mandatory {
display: inline-block;
width: 44%;
margin: 0 0.5%;
}
.mandatory {
position: relative;
}
.mandatory:active::before {
content: '';
}
.mandatory::before {
content: '*';
color: red;
position: absolute;
left: 2%;
z-index: 5;
font-size: 15px;
top: 4%;
font-weight: 800;
}
.Input-icon {
position: absolute;
top: 26%;
right: 6%;
z-index: 5;
font-size: 3ch;
color: #cecece;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="mandatory">
<div class="contain">
<div class="customtooltip">Can't find your language? Please contact us</div>
<div class="Input-icon material-icons" id="LanguageQ">help_outline</div>
</div>
<input type="text" name="language[]" id="name_input" class=" nameinput form-control inputfield input gray mandatory" list="huge_list" placeholder="Languages">
</div>
Here, I have wrapped your .customtooltip and #languageQ div's together and applied the javascript hover function on the container itself. This way I have included both your elements in the hover function, which was previously including only the #languageQ div only, thus causing it to disappear as soon as you move out of the div.
Another way to work around the issue it to nest your target element (in your case: .customtooltip) inside the hovered one (#languageQ) without the need to use javascript at all. Just using css alone.
#Target:hover, #Hovered:hover + #Target
{
display: block;
}

Bootstrap Image Upload Not display

Im added image upload moment for popup, i have some issue for upload option. when the click UPLOAD SPAN tag image not upload and not a display in the circle , and display upload button it's can't be hide, how can i make it correctly , please help me to fix this issue
Thanks
This is my code
.img-upld .img-circle {
border-radius: 50%;
}
.img-upld .img-circle {
background:#90b5e0;
}
.img-upld span {
text-align:center;
width:100%;
background:white;
bottom:0;
padding:20px 0;
opacity:.5
}
.img-upld .img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}
.imageupload.imageupload-disabled {
cursor: not-allowed;
opacity: 0.60;
}
.imageupload.imageupload-disabled > * {
pointer-events: none;
}
.imageupload .panel-title {
margin-right: 15px;
padding-top: 8px;
}
.imageupload .alert {
margin-bottom: 10px;
}
.imageupload .btn-file {
overflow: hidden;
position: relative;
}
.imageupload .btn-file input[type="file"] {
cursor: inherit;
display: block;
font-size: 100px;
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.imageupload .file-tab button {
display: none;
}
.imageupload .file-tab .thumbnail {
margin-bottom: 10px;
}
.imageupload .url-tab {
display: none;
}
.imageupload .url-tab .thumbnail {
margin: 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
<div class="img-upld">
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; "> <span>UPLOAD</span>
<!-- The file is stored here. -->
<input type="file" name="image-file"></span>
</div></div>
</div>
</div>

Please refer my code on CodePen and you need to write file read method for read and view for that refer this link
<input type="file" name="image-file" id="imgupload" style="opacity: 0;">
<a href="#" onclick="$('#imgupload').trigger('click'); return false;">
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; opacity: 0;"> <span>UPLOAD</span>
<!-- The file is stored here. -->
</span>
</div></div>
</a>

Realign buttons

JavaScript
$(function(){
$('.select-another-button').each(function(){
$(this).bind('click', function(e) {
$(this).attr('disabled','true'); //disables the button
$('#overlay').show(); //after disabling show the overlay for hover
setTimeout(function(){
$(this).attr('disabled','false'); //enables after 5mins
$('#overlay').hide(); //hide the overlay
}, 300000);
e.preventDefault();
fileBrowser(this);
return false;
});
});
});
$("#overlay").hover(function(){
$('#message').show();
},function(){
$('#message').hide();
});
HTML
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
data-turbolinks="false" data-url="/documents/upload/9/"
data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>
CSS
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
In the html block, I added the
<div class="wrapper">
<div id="overlay"></div>
<a href="#"
title="{% trans "Send email - rejected file(s)" %}"
class="btn btn-icon select-another-button"
data-url="{% url "messaging:send" request_id=object.pk %}">
<i class="material-icons">assignment_late</i>
<div class='alert alert-success' id='send-message' style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
In fact, I didn't add everything. I just did add the first two div tags, and I got a little issue with the different button from this code. It changed the old line of to the new line of , but I don't even know how to fix it. How could I modify my code to bring back two the old line of buttons? I think I could style with css, but I can't say how because I don't have a lot of experience with it.

.wrapper is a block element, so it won't stay beside it's siblings. All of those siblings have .btn-icon which sets display: inline-block. You could either add .btn-icon to the .wrapper element so it will display inline-block (although then it will inherit the rest of the .btn-icon styles), or just set .wrapper to display: inline-block; (what I did)
.title-actions {
float: right;
height: 50px;
margin-top: 13px;
}
.title-actions a {
transition: background 0.3s ease;
}
.title-actions a.btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions a:hover {
background: #4382B5;
}
.title-actions span {
color: #444;
background: #E6E6E6;
padding: 6px 10px;
border-radius: 3px;
float: none;
position: relative;
margin-left: 6px;
}
.title-actions .btn {
padding: 2px 14px;
line-height: 26px;
max-height: 28px;
position: relative;
top: -1px;
margin-left: 8px;
}
.title-actions .btn-icon {
background: transparent;
position: relative;
color: #3E5366;
text-align: center;
display: inline-block;
padding: 0 !important;
transition: color 0.3s ease;
box-shadow: none !important;
margin-top: -16px;
margin-left: 6px;
}
.title-actions .btn-icon i {
font-size: 35px;
line-height: 20px;
position: relative;
top: 12px;
}
.title-actions .btn-icon:hover {
color: #4382B5;
background: transparent;
}
.title-actions .badge .material-icons {
font-size: 1.2em;
line-height: 0;
position: relative;
top: 4px;
}
.wrapper {
display: inline-block;
}
<div class="card-title">
<div class="title-actions">
<a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button" data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9" data-reload="true" data-url="/documents/select/8/">
<i class="material-icons">folder</i>
</a>
<a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button" data-turbolinks="false" data-url="/documents/upload/9/" data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1" style="position: relative; overflow: visible; direction: ltr;">
<i class="material-icons">cloud_upload</i>
<i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"><input
multiple="multiple" type="file" name="file"
style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></i>
</a>
<div class="wrapper">
<div id="overlay"></div>
<a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button" data-url="/messaging/send/2/">
<i class="material-icons">assignment_late</i>
<div class="alert alert-success" id="send-message" style="display: none;">
<p>
The message was sent to the client. Please wait 5 minutes <br> before sending the message again.
</p>
</div>
</a>
</div>
<i class="material-icons">settings</i>
</div>
<h5>Request documents</h5>
</div>

This may be a slightly odd answer to your question. Assuming you wanted them into groups on the top rightith your 4 icons. (Given i dont have full entirely experience with the mobile-html platform) Here is a javascript you can use to eliminate odd issues:
//this var is short and clean coded to help diagnose some issues
//for this example, you can store values as an array
//these arrays with your content will be used to make cloned sections
//with different icons
var
icon = ["folder", "cloud", "case", "settings"],
imgbg = ["folder.jpg", "cloud.jpg", "case.jpg", "setting.jpg"],
frame = ""
;
for (i = 0; i < icon.length; i++) {
frame += "<div class='" +
icon[i] +
"'style='background-image:url(assets/" +
imgbg[i] +
");'></div>"
;
//which creates the code below as cloning
//"<div class="icon[i]" style="background-image:url(imgbg[i]);"></div>"
}
document.getElementById("demo").innerHTML = frame;
//this returns the clone code into a desired tml empty target like:
//<div id="demo"></div>
//then you can edit the css for float right as well as display top right
//to keep it at top right use this css
.display-top-right{
position:absolute;
top:0;
right:0;
float:right;
z-index:1;
}

HTML/CSS Help I cant't position my search box

for some reason my search box is stuck right under my logo every time I try to move it. Here is my code
.searchbox{
position: absolute;
top:50px;
right: 50px;
}
And my HTML
<div class="headerMenu">
<div id="wrapper"">
<div class="logo">
<img src="./img/logo.png" />
<div class="seachbox">
<p style="margin-right: 1px;"></p>
<form action="search.php" methond="GET" id="search" >
<input type ="text" name="q" size"60" placeholder="Find Surfers...">
My logo css doesn't have position: relative
.logo{
width: 125px;
}
.logo img{
width: 150px;
height: 38px;
padding-top: 5px;
}

That's probably because .logo has position: relative;. Throw out the searchbox from the .logo div. That isn't a part of the logo, is it?
Do something like this
header{
width: 100%;
height: 70px;
background-color: #eee;
position: relative;
padding: 25px 0;
}
header #logo{
width: 150px;
height: 60px;
background-color: orange;
line-height: 60px;
}
header #searchbox{
position: absolute;
top: 50px;
right: 50px;
}
<header>
<div id="logo">Logo</div>
<input type="text" id="searchbox" value="Search...">
</header>