Question

我的页面左上角有1个大部分在屏幕外，它可以作为主页按钮。我想稍微增加它的大小，但我尝试的任何东西似乎都不起作用。

看到图像是一个矢量（感谢上帝）是一个完美的圆圈。因此，使用区域标签，我可以轻松地将其设为主页按钮。现在我想在悬停在该区域标签上时放大图像，我已尝试使用＆＃39; +＆＃39;选择器。

我该怎么做？

这是某些上下文的代码段：

＆＃13;

.emblem {
  width: 200px;
  height: 200px;
  position: absolute;
  margin: -100px 0px 0px -80px;
  z-index: 2;
  opacity: 0.9;
}
.emblem:hover {
  width: 220px;
  height: 220px;
}
.emblem2 {
  visibility: hidden;
  width: 220px;
  height: 220px;
}
area:hover + .emblem2 {
  visibility: visible;
}

＆＃13;

<map name="homemap">
  <area shape="circle" coords="100,100,100" alt="Home button" href="index.html" />
</map>
<img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />
<img class="emblem2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />

＆＃13;

现在这种方法很好......但是只有当我将鼠标悬停在图像的透明部分上时，我想要达到的目标恰恰相反。

Answer 1

您可以尝试仅转换要放大的图像的比例。像这样的东西：

＆＃13;

.emblem {
  width: 200px;
  height: 200px;
  opacity: 0.9;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1); 
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1); 
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);   
}
.emblem:hover{
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);   
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

＆＃13;

<img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="UFF emblem" usemap="#homemap" />

＆＃13;

Answer 2

使用CSS：

.img-box {
  cursor: pointer;
  height: 110px;
  position: relative;
  width: 110px;
}
.img-link {
  color: #000;
  text-decoration: none;
}
.img-link a,
.img-link a:active,
.img-link a:focus,
.img-link a:hover {
  border-color: transparent;
  color: #000;
  text-decoration: none;
}
.fa-hover {
  bottom: 0;
  font-size: x-large;
  position: absolute;
  right: 0;
}
.fa-hover:hover + .emblem {
  height: 100px;
  width: 100px;
}
.emblem {
  height: 75px;
  width: 75px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="img-box">
  <a class="img-link" href="https://www.google.ca" target="_window">
    <div class="fa-hover">
      <span class="fa fa-plus"></span>
    </div>
    <img class="emblem" src="https://lh3.ggpht.com/A0x3jzuH1qRkE10HcTiT4qQr_6iAqVg-CTsoIqxnoIFyv92V91WI3KqiVlOvLtfoMRg=w300" />
  </a>
</div>

在'+'选择器的下方是你的悬停元素必须高于'img'标签，但用css可以移动图标。

将鼠标悬停在矢量的一部分上时，如何放大图像？

2 个答案: