Как увеличить изображения при наведении, используя только CSS в Ruby on Rails?

Question

Прямо сейчас пользователь может загружать и просматривать изображения, используя Ruby on Rails. Я хотел бы, чтобы эти изображения были увеличены при наведении.

Аналогичный вопрос был задан (ссылка ниже) без ответа.

В начальной загрузке, как увеличить одно из этих изображений при наведении мыши? И IE8 должен быть совместимым

Чтобы реализовать эту функцию, я добавил: hover к custom.scss (см. Ниже), но изображения не нужно увеличивать при наведении.

span.picture {
    margin-top: 10px;
    input {
      border: 0;
    }
  }
   span.picture:hover {
     transform: scale(1.5);
}

// Связанные файлы похожи, как показано ниже:

'' 'from source / bootstrap' ''

    <span class="content">
        pic
        <img src="https://example.s3.amazonaws.com/uploads/micropost/picture/124/1.JPG" alt="B1" />
      </span>

'' 'из custom.scss' ''

.content {
    display: block;
    margin-left: 60px;
    img {
      display: block;
      padding: 5px 0;
    }
  }


span.picture {
  margin-top: 10px;
  input {
    border: 0;
  }
}

'' 'из Gemfile' ''

gem 'bootstrap-will_paginate', '1.0.0'
gem 'bootstrap-sass', '3.3.7'
gem 'puma',         '3.9.1'

Answer 1

Из кода, который вы показываете CSS должно быть:

.content {
  display: block;
  margin-left: 60px;
  img {
    display: block;
    padding: 5px 0;
  }
}
.content:hover img {
  transform: scale(1.5);
}

Я понятия не имею, для чего предназначен этот селектор span.picture, по крайней мере, в отображаемом вами HTML-элементе нет элемента span с изображением класса.