Я все еще изучаю стили и ищу решение, где:

  1. поверх изображения появляется наложение с градиентом от светло-серого до светло-бирюзового
  2. картинка увеличивается на 20% (она не выходит за исходные размеры) и поворачивается на 30 градусов по часовой стрелке
  3. анимация все происходит плавно в течение 300 мс

Я сделал масштаб изображения и повернул его, но наложение сводит меня с ума.

.zoom-effect-container {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 300ms ease;
  transition: 300ms ease
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2) rotate(30deg);
}
<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>
-1
Andrey Smolin 6 Июн 2019 в 04:39

2 ответа

Лучший ответ

Используйте псевдоэлемент:

.image-card:before { ... }

Примените к этому элементу градиент CSS. Я использовал сайт-генератор, чтобы создать этот пример. Действительно легко выбрать любые настройки, которые вам нужны: https: //colorzilla.com/gradient-editor/#e0e0e0+0,00faff+100&0+0,0.65+100

z-index понадобится в этот момент, чтобы "слои" складывались в правильном порядке.

.zoom-effect-container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.zoom-effect-container:hover .image-card:before {
  /* this is the overlay */
  position: absolute;
  z-index: 9;
  content: '';
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(top, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(224, 224, 224, 0) 0%, rgba(0, 250, 255, 0.65) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e0e0', endColorstr='#a600faff', GradientType=0);
  /* IE6-9 */
}

.image-card img {
  position: relative;
  z-index: 1;
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(2);
  transform: scale(2) rotate(30deg);
}
<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
</div>
2
BugsArePeopleToo 6 Июн 2019 в 04:47

Не очень понятно, что вы хотите сделать с наложением градиента. А пока пример ниже:

  • Добавляет div для градиентов внутри контейнера и накладывает его на верхнюю часть изображения. Поскольку мы используем position: absolute для обоих и градиент div идет после изображения div, градиент div идет поверх изображения div. В противном случае нам пришлось бы использовать z-index для управления тем, что div идет сверху.
  • Наложение div устанавливает top, right, bottom, left все в 0 для заполнения всего контейнера.
  • Наложение div использует opacity, чтобы мы могли видеть сквозь него с эффектом прозрачности. .2 означает прозрачность на 20%. 0 полностью прозрачный; 1 полностью сплошной / непрозрачный.
  • Добавляет :hover на оверлей div для отображения linear-gradient() на background.
.zoom-effect-container {
  float: left;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid black;
}

.image-card {
  position: absolute;
  top: 0;
  left: 0;
}

.image-card img {
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

.gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .2;
}

.zoom-effect-container:hover .image-card img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2) rotate(30deg);
}

.zoom-effect-container:hover .gradient {
  background: linear-gradient(lightgray, turquoise);
}
<div class="zoom-effect-container">
  <div class="image-card">
    <img src="https://picsum.photos/300/200" />
  </div>
  <div class="gradient"></div>
</div>

Полезные ссылки, чтобы узнать больше:

1
OXiGEN 6 Июн 2019 в 04:56