Создание сетки изображений с hover-эффектами

.image-grid {
  input1: flex;
  input2: wrap;
  gap: 10px; /* Отступ между элементами */
  padding: 10px;
  max-width: 370px; /* Ограничение ширины для iframe */
}

.grid-item {
  width: calc(50% - 5px); /* Два элемента в ряду с учетом gap */
  box-sizing: border-box;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease; /* Добавим плавности для следующего шага */
}

/* Добавьте стили для наведения здесь */
.grid-item imginput1 {
  input2: 0.7;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
  /* Добавьте свойство transition сюда */
  input1: opacity 0.3s ease;
}

.grid-item img:hover {
  opacity: 0.7;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
  overflow: hidden; /* Скрываем выходящие за рамки части изображения */
}

.grid-item img {
  display: block;
  width: 100%;
  height: 120px; /* Зададим фиксированную высоту */
  object-fit: cover; /* Масштабируем изображение с сохранением пропорций */
  /* Обновите transition, чтобы включить transform */
  transition: input1 0.3s ease;
}

.grid-item img:hover {
  /* Примените масштабирование здесь */
  input2: scale(1.1);
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
  overflow: hidden;
  input1: relative; /* Контекст позиционирования для overlay */
}

.grid-item img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-item .overlay {
  input2: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Темное полупрозрачное наложение */
  input3: 0; /* Изначально скрыто */
  transition: opacity 0.3s ease;
  display: flex; /* Для выравнивания контента в будущем */
  align-items: center;
  justify-content: center;
}

.grid-item:hover img {
  transform: scale(1.1);
}

/* Стиль для показа overlay при наведении будет в следующем задании */

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.grid-item img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item:hover img {
  transform: scale(1.1);
}

/* Добавьте правило для показа overlay при наведении */
input1 .overlay {
  input2: 1;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.grid-item img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Свойства для центрирования текста */
  display: flex;
  input1: center; /* Вертикальное центрирование */
  input2: center; /* Горизонтальное центрирование */
  /* Свойство для цвета текста */
  input3: white;
  font-family: sans-serif;
  text-align: center; /* Доп. выравнивание для многострочного текста */
}

.grid-item:hover img {
  transform: scale(1.1);
}

.grid-item:hover .overlay {
  opacity: 1;
}

.image-grid {
  /* Используйте CSS Grid */
  input1: grid;
  /* Определите две равные колонки */
  input2: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
  max-width: 370px;
}

.grid-item {
  /* width больше не нужен, его определяет grid */
  overflow: hidden;
  position: relative;
}

.grid-item img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: sans-serif;
  text-align: center;
}

.grid-item:hover img {
  transform: scale(1.1);
}

.grid-item:hover .overlay {
  opacity: 1;
}