<div> <div class="rounded-circle test position-relative" style="width: 150px; height:150px; overflow: hidden;"> <img id="imguplod" width="100%" src="./images/Ellipse 523.png" alt=""> <label class="cam_img" for="imgInp"> <img width="100%" src="./images/group.png" alt=""> </label> <input type="file" name="logo" id="imgInp" style="display: none;" accept="image/*"> </div> <script> imgInp.onchange = evt => { const[file] = imgInp.files; if (file) { imguplod.src = URL.createObjectURL(file); } } </script> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter