title: Image in placeholder html?
body: <p>Can I do something like this with pure html and if needed css and javascript:</p>
  
  <p><img src="https://i.stack.imgur.com/1XVSx.png" alt="Google Custom Search Image"></p>
  
  <p>And when the mouse focuses, it becomes like this:</p>
  
  <p><img src="https://i.stack.imgur.com/DxYqX.png" alt="Google Custom Search When Focused"></p>
  
  <p>So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?</p>
  
  <p><strong>EDIT:</strong> Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?</p>