css

How To Outline a PNG (Transparent) image with CSS?

Title says most of it. I need to make a transparent image outlined or make it glow when hovered, i tried doing it for the whole day but not sucess yet. Any suggestions/help?

Thanks

Solution

  • Simple Image Swap on Hover...

    JSFiddle

    <div class="wrapper">
  <img class="main" src="http://lorempixel.com/400/200/food/1/" />
  <img class="hover" src="http://lorempixel.com/400/200/food/2/" />
</div>


img.hover {
  display: none;
}
.wrapper:hover img.main {
  display: none;
}
.wrapper:hover img.hover {
  display: block;
}