4

пример

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

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

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

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

2
  • Как вы себе представляете изменение размера без масштабирования? Оно обрезаться должно?
    – Xander
    30 июн 2016 в 19:34
  • 1
    Я наверно плохо объяснил, фото женщины немного больше чем сейчас, то есть его не полностью видно, а когда hover оно должно как бы раздвигать свои рамки и увеличиваться.
    – teckor32
    30 июн 2016 в 19:54

5 ответов 5

10

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'); }
<div class="frame">
  <div class="photo catherine-gail"></div>
</div> 

<div class="frame">
  <div class="photo harvey-rube"></div>
</div>

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'); }
<div class="frame">
  <div class="photo catherine-gail"></div>
</div> 

<div class="frame">
  <div class="photo harvey-rube"></div>
</div>

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

6

.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" />

1
  • 1
    "НО без изменения масштабирования"
    – teckor32
    30 июн 2016 в 19:31
2

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

0

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

0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.