Как сделать эффект увеличенного фото?

#html #css #css3

Как сделать так, как на прикрепленной картинке?
То есть, фото имеет свой реальный размер, а когда оно неактивно, оно немного меньше,
НО без изменения масштабирования.

Вынесено из комментариев

Фотографии обрезаны, их видно не полностью. При :hover фотографии должны раздвигать
рамки до своего истинного размера. 

Увеличивается только зона видимости, а масштаб фотографии остаётся прежним.
    

Ответы

Ответ 1

1) Увеличение фото без масштабирования понял так:

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'); }

  

 


  






2) Научим фотографии приподниматься и сделаем переход плавным:

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'); }

  

 


  






3) Добавим имена, обесцвечивание и рыжую полосу под фотографией

После добавления фильтра углы фоторамки стали выпрямляться на время перехода. Поэтому
прописал для transition-property список конкретных значений вместо all.

Проверьте результат: 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;
}

  

    

  
  
Catherine Gail
 


  

    

  
 
  
Harvey Rube



Ответ 2

.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;
}







Ответ 3

Ссылка на 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;
}

  

    

    
Liv Tyler
  
 
  
  

    

    
Andre Braugher
  



Ответ 4

.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;
}

  

    
  
  

    
  
  

    
  



Ответ 5

Или ещё тоже способ:
Способ смены картинок. Без изменения ширины и высоты объекта в пикселях. 



.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;
}