How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]

by

If I understand what you need.. You don’t need JavaScript, only css.

.wrapper {
  position:relative;  
  display:inline-block;
}

.file-wrapper {
  opacity:0;
  transition:all .3s ease;
  position:absolute;
  bottom:0;
  left:50%;
  text-align:center;
  transform:translateX(-50%);
}

.wrapper:hover .file-wrapper {
    opacity:1;
}

input {
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button {
  background:#000;
  color:#fff;
  border-radius:5px;
  padding:10px;
}
<div class="wrapper">
  <img src="data:image/png;base64,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" /> 
  <div class="file-wrapper">
    <input type="file" />
    <div class="button">Change picture</div>
  </div>
</div>

More Related Contents:

  1. Switch classes on click of button
  2. How to change the colour of a scrollbar on a web page? [closed]
  3. Does any budy know how to reproduce this hover effect on this page? [closed]
  4. JQuery change CSS style of table cells which contain disabled elements [closed]
  5. how to press keyboard with Jquery/ Javascript [duplicate]
  6. How can I modify with css an image appended with javascript?
  7. best tools for theme design? [closed]
  8. Css set size of elements in array dynamically [closed]
  9. How can I make my header smaller if i will scroll down the webpage [closed]
  10. Scroll Function working in reverse order [closed]
  11. Using jQuery to center a DIV on the screen
  12. Height equal to dynamic width (CSS fluid layout) [duplicate]
  13. jQuery: Get height of hidden element in jQuery
  14. horizontal scrollbar on top and bottom of table
  15. Set timeout for ajax (jQuery)
  16. Keep overflow div scrolled to bottom unless user scrolls up
  17. Show and hide divs at a specific time interval using jQuery
  18. How do I detect “shift+enter” and generate a new line in Textarea?
  19. Dashed border animation in css3 animation
  20. :touch CSS pseudo-class or something similar?
  21. CSS3-Animate elements if visible in viewport (Page Scroll)
  22. Open a new javascript window(.open) along with its CSS styling
  23. How to create a responsive image that also scales up in Bootstrap 3
  24. Check if element is between 30% and 60% of the viewport
  25. How do I make a move up and down when I’m scrolling the page?
  26. Fade background image in and out with jQuery?
  27. How do I detect the inherited background-color of an element using jQuery/JS?
  28. Convert dropdown to selection boxes with color and trigger drop down action
  29. Detect if dropdown navigation would go off screen and reposition it
  30. Bootstrap Dropdown menu is not working

Leave a Comment