Question

我的代码是纯粹的HTML，只有很少的javascript。我有一些图像所有我需要的悬停图像它弹出像一个大图片或相同的大小

HTML代码：

<div class="content-box-left-bootomgrid lastgrid">
     <img src="../images2.jpg" title="ocean" />
     <img src="../images3.jpg" title="pool" />
</div>

当用户悬停图像时，弹出的图像就是我需要的全部

Answer 1

悬停时图像会变大，

img {
  height: 200px;
  width: 200px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

img:hover {
  width: 220px;
  height: 220px;
}

<div class="content-box-left-bootomgrid lastgrid">
  <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/25126583741_d7db3f6905_o.jpg?itok=jYAcBCmb" title="ocean" />
  <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" title="pool" />
</div>

Answer 2

试试这个。我认为这是正确的方法。只需增加或减少刻度内的数字即可。

Answer 3

这是另一个例子：

＆＃13;

.div1 {
  width: 320px;
  height: 240px;
}
.div2image {
  width: 100%;
  height: 100%;
}
.div2image img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.div2image:hover img {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
}

＆＃13;

<div class="div1">
  <div class="div2image">
    <img src="https://openclipart.org/download/69331/HTML-Icon-Final.svg" alt="Some awesome text" />
  </div>
</div>

＆＃13;

经过测试：

chrome
火狐
IE11

悬停选定图像时，会弹出所选图像

3 个答案: