I need, so that when you hover on a photo, this blue frame is superimposed on it, a frame in png format. I made sketches but I can't. Maybe I did something wrong, or there is some other option!

<div class="bordered"> <img src="images/photo-staff-1.png" class="by-picture" alt=""> </div> .bordered{ display: inline-block; position: relative; } .bordered .by-picture{ display: inline-block; position: relative; z-index: 100 } .bordered:hover{ background: url(../images/border.png); z-index: 200; position: absolute; }

the photo Photo frame

  • In this case, you should have 3 images - 2 backgrounds and a photo. Put a photo on the background and change the background when you hover it - Ordman
  • Your frame should not only be in png , but also have a transparent background. otherwise the plan won't work - lexxl
  • Thank you very much, another idea came to mind, everything turned out - Igor

1 answer 1

The dbqUl.png not original: I cut out the background from it.

 .bordered { display: inline-block; position: relative; } .bordered:hover:after { background: url('http://i.imgur.com/jnOOCiN.png'); position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; } 
 <div class="bordered"> <img src="http://i.stack.imgur.com/dbqUl.png" class="by-picture" alt=""> </div>