如何在Ruby on Rails中仅使用CSS来悬停图像？

Question

Right now, a user could download and see images using Ruby on Rails. I would like that those images be enlarged on hover.

The similar question was asked (link below) without the answer on it.

In bootstrap, how to enlarge one of these images when mouse is hovered? And IE8 shall be compatible

To implement this functionality, I've added :hover to custom.scss(see below) but the pictures want not being enlarged on hover.

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

//The files related are similar as below:

'''from source/bootstrap'''

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

'''from custom.scss'''

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


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

'''from Gemfile'''

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

Answer 1

From the code you are showing the CSS should be:

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

I have no idea what's that span.picture selector for, at least there's no span element with class picture on the HTML you are showing.