Question

这是图像块悬停效果示例：

有人可以指导我正确的方向吗？什么是CSS？

我想在我的图像块上复制这种悬停效果。

谢谢您的帮助，

迈克

Answer 1

将鼠标悬停在图像上时，可以使用transform属性对其进行缩放，并向其中添加border。下面是一个示例CSS代码，将其替换为您的类名

   .myimg {
      transition: all .4s ease-in;

    }

    .myimg:hover {
      transform: scale(1.1);
      border: 5x solid green;
      box-shadow: 2px 2px 10px #333;
    }

<img src="https://www.dike.lib.ia.us/images/sample-1.jpg" class="myimg"/>

Answer 2

您也可以稍微box-shadow进行游戏，以在卡悬停或聚焦时产生更好的深度幻觉。其他详细信息：

Flexbox卡片周围的包装纸
使用transform / scale
SVG属性上的{li> transition fill
未将卡片悬停或聚焦时添加了透明边框，以防止在悬停/聚焦期间出现文本移动和跳跃行为

.cards {
  display: flex;
}

.card-image {
  max-width: 50px;
  margin-bottom: 1em;
}

.card-image .svg-icon {
  transition: fill 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card:hover .card-image,
.card:focus .card-image {
  fill: #97cb6f;
}

.card {
  font-family: helvetica;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  background: #fff;
  border-radius: 2px;
  margin: 1rem;
  position: relative;
  padding: 1em;
  border: 2px solid transparent;
}

.card:hover,
.card:focus {
  border: 2px solid #97cb6f;
  transform: scale(1.05, 1.05);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card h2 {
  margin-top: 0;
  font-size: 120%;
}

.card ul {
  padding: 0 0 0 1em;
}

.card li {
  margin-bottom: .5em;
}

<div class="cards">
  <div class="card" tabindex="0">
    <div class="card-image">
      <svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.896,12.706v-0.005v-0.003L15.855,2.507c-0.046-0.24-0.255-0.413-0.5-0.413H4.899c-0.24,0-0.447,0.166-0.498,0.4L2.106,12.696c-0.008,0.035-0.013,0.071-0.013,0.107v4.593c0,0.28,0.229,0.51,0.51,0.51h14.792c0.28,0,0.51-0.229,0.51-0.51v-4.593C17.906,12.77,17.904,12.737,17.896,12.706 M5.31,3.114h9.625l1.842,9.179h-4.481c-0.28,0-0.51,0.229-0.51,0.511c0,0.703-1.081,1.546-1.785,1.546c-0.704,0-1.785-0.843-1.785-1.546c0-0.281-0.229-0.511-0.51-0.511H3.239L5.31,3.114zM16.886,16.886H3.114v-3.572H7.25c0.235,1.021,1.658,2.032,2.75,2.032c1.092,0,2.515-1.012,2.749-2.032h4.137V16.886z"></path>
						</svg>
    </div>
    <h2>Some Title</h2>
    <ul>
      <li>Great</li>
      <li>Greater</li>
      <li>Greatest</li>
    </ul>
  </div>

  <div class="card" tabindex="0">
    <div class="card-image">
      <svg class="svg-icon" viewBox="0 0 20 20">
							<path d="M17.896,12.706v-0.005v-0.003L15.855,2.507c-0.046-0.24-0.255-0.413-0.5-0.413H4.899c-0.24,0-0.447,0.166-0.498,0.4L2.106,12.696c-0.008,0.035-0.013,0.071-0.013,0.107v4.593c0,0.28,0.229,0.51,0.51,0.51h14.792c0.28,0,0.51-0.229,0.51-0.51v-4.593C17.906,12.77,17.904,12.737,17.896,12.706 M5.31,3.114h9.625l1.842,9.179h-4.481c-0.28,0-0.51,0.229-0.51,0.511c0,0.703-1.081,1.546-1.785,1.546c-0.704,0-1.785-0.843-1.785-1.546c0-0.281-0.229-0.511-0.51-0.511H3.239L5.31,3.114zM16.886,16.886H3.114v-3.572H7.25c0.235,1.021,1.658,2.032,2.75,2.032c1.092,0,2.515-1.012,2.749-2.032h4.137V16.886z"></path>
						</svg>
    </div>
    <h2>Some Title</h2>
    <ul>
      <li>Great</li>
      <li>Greater</li>
      <li>Greatest</li>
    </ul>
  </div>

</div>

jsFiddle

复制图像块悬停效果：随附示例

2 个答案: