wolfgang1983 wolfgang1983 - 2 months ago 16
CSS Question

Display the selected image on top of another div

When I select a image I can preview it. But it shows it above the upload-data div.

What I am trying to achieve it once select image the image preview div will show on top of the upload data div?

Question: Once select image how am I able to make the preview image display on top of the upload-data div?

Codepen DEMO


<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="well">
<div class="upload-info">

<div class="upload-image"></div><!-- Preview Div-->

<div class="upload-data">
<i class="fa fa-cloud-upload" aria-hidden="true"></i>
<input type="file" class="file-input" />
<p>Click any where to select file!</p>
</div><!-- Upload image data-->

</div><!-- Upload info-->



.container {
margin-top: 20px;

.well {
text-align: center;
overflow: hidden;
position: relative;
cursor: pointer;

.well .file-input {
cursor: pointer;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size: 50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0)

.well i {
font-size: 15rem;
text-shadow: 10px 10px 10px #646464;

.well img {
width: 100%;
height: 280px;


function readURL(input) {

if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
$('.upload-image img').attr('src', e.target.result);



Codepen: http://codepen.io/anon/pen/bBgxwK

I just simply hid the upload-data div once the user selects a file. You can the add a cancel button and unhide the div incase the user want to select another file.

    $('.upload-data').hide(); //Hide the div.

Hope it helps, don't really know if it's what you were looking for.


You can unhide the div using the jquery method .show().