example

How to make so, how on the attached picture? That is, the photo has its real size, and when it is inactive, it is slightly smaller, BUT without changing the scaling.

Removed from comments

Photos are cropped, they are not fully visible. When :hover photos should push the frame to its true size.

Only the zone of visibility increases, and the scale of the photo remains the same.

  • How do you imagine resizing without scaling? Should it be clipped? - Xander
  • one
    I probably didn’t explain well, the photo of the woman is slightly larger than now, that is, it is not fully visible, and when the hover is supposed to expand its limits and increase. - teckor32

5 answers 5

1) The increase in the photo without scaling is understood as

https://jsfiddle.net/glebkema/v0L21uhv/

 .frame { border-radius: 12px; float: left; height: 270px; /* = 310px - 2 * 20px */ overflow: hidden; position: relative; margin: 20px; width: 210px; /* = 250px - 2 * 20px */ } .photo { background-size: cover; margin: -20px; } .frame:hover, .photo { height: 310px; width: 250px; } .frame:hover, .frame:hover .photo { margin: 0; } .catherine-gail { background-image: url('http://i.stack.imgur.com/NjME4.png'); } .harvey-rube { background-image: url('http://i.stack.imgur.com/X2zkx.png'); } 
 <div class="frame"> <div class="photo catherine-gail"></div> </div> <div class="frame"> <div class="photo harvey-rube"></div> </div>

2) Teach photos to lift and make the transition smooth:

https://jsfiddle.net/glebkema/9urj71cd/

 .frame { border-radius: 12px; float: left; height: 270px; /* = 310px - 2 * 20px */ overflow: hidden; position: relative; margin: 20px; top: 20px; width: 210px; /* = 250px - 2 * 20px */ } .photo { background-size: cover; margin: -20px; } .frame:hover, .photo { height: 310px; width: 250px; } .frame:hover, .frame:hover .photo { margin: 0; } .frame:hover { top: 0; } .frame, .photo { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .catherine-gail { background-image: url('http://i.stack.imgur.com/NjME4.png'); } .harvey-rube { background-image: url('http://i.stack.imgur.com/X2zkx.png'); } 
 <div class="frame"> <div class="photo catherine-gail"></div> </div> <div class="frame"> <div class="photo harvey-rube"></div> </div>

3) Add names, discoloration and a red strip under the photo.

After adding the filter, the corners of the photo frame began to straighten during the transition. Therefore, I wrote for the transition-property list of specific values ​​instead of all .

Check the result: https://jsfiddle.net/glebkema/byf4kw69/

 .artist { float: left; } .frame { border-radius: 12px; height: 270px; /* = 310px - 2 * 20px */ overflow: hidden; position: relative; margin: 20px; top: 20px; width: 210px; /* = 250px - 2 * 20px */ } .photo { background-size: cover; margin: -20px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .artist:hover .frame, .photo { height: 310px; width: 250px; } .artist:hover .frame, .artist:hover .photo { margin: 0; } .artist:hover .frame { top: 0; } .artist:hover .photo { box-shadow: inset 0 -6px 0 orange; -webkit-filter: none; filter: none; } .artist, .frame, .name, .photo { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: box-shadow, color, height, margin, top, width; -moz-transition-property: box-shadow, color, height, margin, top, width; -o-transition-property: box-shadow, color, height, margin, top, width; transition-property: box-shadow, color, height, margin, top, width; } .catherine-gail { background-image: url('http://i.stack.imgur.com/NjME4.png'); } .harvey-rube { background-image: url('http://i.stack.imgur.com/X2zkx.png'); } .name { color: #999; font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold; padding-top: 12px; text-align: center; text-transform: uppercase; } .artist:hover .name { color: #000; } 
 <div class="artist"> <div class="frame"> <div class="photo catherine-gail"></div> </div> <div class="name">Catherine Gail</div> </div> <div class="artist"> <div class="frame"> <div class="photo harvey-rube"></div> </div> <div class="name">Harvey Rube</div> </div> 

     .btn-social { width: 100px; position: relative; opacity: 0.5; transition: 0.3s ease; cursor: pointer; } .btn-social:hover { transform: scale(1.5, 1.5); opacity: 1; } 
     <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" /> <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" /><br /> <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" /> <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" />

    • one
      "BUT without scaling change" - teckor32

    Link to jsfiddle.net

     .container { margin-top: 50px; display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; width: 500px; } .foto { position: relative; width: 200px; height: 300px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .foto:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; } .foto:hover .pict { position: absolute; bottom: 70px; margin-left: -10px; width: 220px; height: 255px; background-size: cover; border-bottom: 5px solid #ff8c00; } .foto:hover .description { position: absolute; bottom: 0; color: #000; } .pict { width: 100%; height: 235px; background-size: cover; border-radius: 7px; } .pict1 { background: url('http://lostpix.com/img/2014-11/07/6bmj9jeo5ji6luza36ykdlbny.jpg') no-repeat 50% 50%; } .pict2 { background: url('http://s2.hostingkartinok.com/uploads/images/2013/06/f7ed8a07999a8dc0034653bdcd866868.jpg') no-repeat 50% 50%; } .description { width: 100%; height: 65px; line-height: 65px; text-align: center; font-weight: bold; font-size: 1.5em; color: grey; } 
     <div class="container"> <div class="foto"> <div class="pict pict1"></div> <div class="description">Liv Tyler</div> </div> <div class="foto"> <div class="pict pict2"></div> <div class="description">Andre Braugher</div> </div> </div> 

       .btn-social { cursor: pointer; position: absolute; width: 150px; } .btn-social:hover { left: -15px; top: -30px; width: 180px; } .wrap { float:left; margin: 20px; position: relative; width: 150px; } 
       <div class="bg"> <div class="wrap"> <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" /> </div> <div class="wrap"> <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" /> </div> <div class="wrap"> <img src="http://i.stack.imgur.com/o9lC1.png" class="btn-social" /> </div> </div>

        Or also the same way:
        The way to change pictures. Without changing the width and height of the object in pixels.

         .image.UP, .image.Down { border:2px solid transparent; margin:0; padding:0; } .image.UP{ opacity:1.0; display:block; position:absolute;z-index:100; transition-duration: 0.96s; -webkit-transition-duration: 0.96s; -moz-transition-duration: 0.96s; -o-transition-duration: 0.96s; -ms-transition-duration: 0.96s; /* IE9+ */ } .image.UP:hover { opacity:0.00; } div.ImgWrap{ display:inline-block; padding:0;margin:0; background-position:center center; background-repeat:no-repeat; } 
         <div class=ImgWrap style="cursor:pointer; position: relative; z-index:0;"> <img class="image UP" src="http://krasnoyarsk-land.ru/temp/images/images_normal.jpg" title="Котик" alt="Котик"> <img class="image Down" src="http://krasnoyarsk-land.ru/temp/images/images_over.jpg" title="Котик" alt="Котик"> </div>