There are pictures, which according to the idea should appear when you hover the inner frame. How can this be done if the pictures are all of different sizes (positioning cannot be used with the specified dimensions), they cannot be initially cropped (transparent border ) and everything should be cross-browser ie9+ ? Is there any tricky way to do this (of course, what I mean without scripts)?

 img:hover { outline: 6px solid #666; } 
 <img src="http://placehold.it/350x150">

    2 answers 2

     .border { display: inline-block; position: relative; } .border::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0 0 0 0 rgba(255,255,255,.5); transition: box-shadow .1s ease; } .border:hover::after { box-shadow: inset 0 0 0 10px rgba(255,255,255,.5); } img { display: block; position: relative; } 
     <div class="border"> <img src="http://placehold.it/350x150"> </div> 

       * { box-sizing: border-box; } .b-pict { display: inline-block; position: relative; } .b-pict img { display: block; } .b-pict:before { content: ''; opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 4px solid rgba(0, 0, 0, .5); -webkit-transition: 0.3s; transition: 0.3s; } .b-pict:hover:before { opacity: 1; } 
       <div class="b-pict"> <img src="http://placehold.it/150x150"> </div> <div class="b-pict"> <img src="http://placehold.it/250x150"> </div> <div class="b-pict"> <img src="http://placehold.it/350x250"> </div>

      Example in fiddle