卡卡網

鼠標懸停效果（鼠標移到圖片上顯示標題或說明文字），這是一個很常見的效果，本文將介紹它的實現(xiàn)方法。

鼠標移到圖片上顯示標題或說明文字

demo

下面介紹如何實現(xiàn)這一效果。

標記

HTML網格(grid)和圖形(figure)的結構將由無序列表組成，每個項目將包含一個figure元素。 該figure將包含一個圖片和一個帶有一些文本元素和鏈接的figcaption：

<ul class="grid cs-style-1">
  <li>
    <figure>
      <img src="images/1.png" alt="img01">
      <figcaption>
        <h3>Camera</h3>
        <span>Jacob Cummings</span>
        <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <!-- ... -->
    </figure>
  </li>
  <!-- ... -->
</ul>

這是所有網格(figure)示例的默認結構。每個單一效果的類將添加到列表中，所以示例1將具有“cs-style-1”，示例2將具有“cs-style-2”等等。

但我們先定義所有效果的公共樣式。

CSS

首先，我們將定義網格(gird)的樣式以及將用作圖形(figure)容器的列表項：

.grid {
  padding: 20px 20px 100px 20px;
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}

.grid li {
  display: inline-block;
  width: 440px;
  margin: 0;
  padding: 20px;
  text-align: left;
  position: relative;
}

使列表項顯示為內聯(lián)塊將允許我們將它們居中應用于父級的居中文本對齊。

我們重設figure元素的邊距，并將位置設置為相對(relative)。

.grid figure {
  margin: 0;
  position: relative;
}

 figcaption位置設置為絕對(absolute)，我們需要確保它在figure里面， 默認情況下，它將位于左上角，我們不會在這里定義任何寬度或高度，因為我們將在所有單獨的樣式中定義：

.grid figcaption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  background: #2c3f52;
  color: #ed4e6e;
}

圖像的最大寬度為100％，當我們定義媒體查詢以調整列表項的大小時，它將派上用場：

.grid figure img {
  max-width: 100%;
  display: block;
  position: relative;
}

 最后，定義所有文本和鏈接的樣式：

.grid figcaption h3 {
  margin: 0;
  padding: 0;
  color: #fff;
}

.grid figcaption span:before {
  content: 'by ';
}

.grid figcaption a {
  text-align: center;
  padding: 5px 10px;
  border-radius: 2px;
  display: inline-block;
  background: #ed4e6e;
  color: #fff;
}

這里使用偽類:before給span添加內容“by”。 當然，您可以在HTML中添加它，但在css里使您可以更加輕松地將其更改為“make by”或“Designer:”或類似內容。

在CSS最后，添加較小屏幕的媒體查詢：

@media screen and (max-width: 31.5em) {
  .grid {
    padding: 10px 10px 100px 10px;
  }
  .grid li {
    width: 100%;
    min-width: 300px;
  }
}
 

現(xiàn)在，我們就可以做一些好看的效果了。

效果一

鼠標懸停效果一

讓我們從一個非常簡單的效果開始。我們希望標題淡入并向右和向下移動一點，從而產生從圖像中出來的3D圖層的錯覺。

為此，我們首先需要設置figcaption的寬度和高度，并將初始不透明度設置為0：

.cs-style-1 figcaption {
  height: 100%;
  width: 100%;
  opacity: 0;
  text-align: center;
  backface-visibility: hidden;
  transition: transform 0.3s, opacity 0.3s;
}

我們還添加了一個轉換，并將背面可見性設置為隱藏，以避免在轉換結束時文本呈現(xiàn)中跳轉。

在懸停（鼠標移到圖片上）時，我們將不透明度(opacity)設置為1并設置figcaption的轉換(transform)效果。

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
  opacity: 1;
  transform: translate(15px, 15px);
}

另外，設置文本位置：

.cs-style-1 figcaption h3 {
  margin-top: 70px;
}

.cs-style-1 figcaption span {
  display: block;
}

.cs-style-1 figcaption a {
  margin-top: 30px;
}

execcodegetcode

效果二

鼠標懸停效果二

這個效果會將圖像向上移動并顯示出圖形。

因此，讓我們?yōu)閳D像添加轉換過渡并使其在懸停時向上移動：

.cs-style-2 figure img {
  z-index: 10;
  transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
  transform: translateY(-90px);
}

我們將z-index設置為10，以便圖像保持在標題之上。

figcaption需要固定的高度和100％的寬度。 我們將它貼在圖的底部：

.cs-style-2 figcaption {
  height: 90px;
  width: 100%;
  top: auto;
  bottom: 0;
}

我們還將鏈接按鈕放在右側：

.cs-style-2 figcaption a {
  position: absolute;
  right: 20px;
  top: 30px;
}

execcodegetcode

 效果三

鼠標懸停效果三

效果三看起來好像標題稍微推動了圖像。

首先，我們需要將圖的溢出設置為隱藏，這樣我們在移動時不會看到任何溢出的東西：

.cs-style-3 figure {
  overflow: hidden;
}

圖像需要過度(transition)以進行轉換(transform)，并且在懸停(hover)時我們會將其轉換為50px：

.cs-style-3 figure img {
  transition: transform 0.4s;
}

.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
  transform: translateY(-50px);
}

figcaption將比前一個例子略高， 我們還為變換(transform)和不透明度(opacity)添加一個過渡(transition)：

.cs-style-3 figcaption {
  height: 100px;
  width: 100%;
  top: auto;
  bottom: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s, opacity 0.1s 0.3s;
}

在懸停(hover)時，我們將不透明度(opacity)設置為1并將其轉變(translate)過來。 看看我們是如何添加兩個過渡的？ 一個用于正常狀態(tài)，一個用于懸停？這是我們如何控制懸停和不懸停時發(fā)生的事情。 此處的轉換將應用于懸停：我們希望元素快速變?yōu)椴煌该鳎瑫r需要0.4秒進行轉換。當我們將鼠標懸停時，不透明度將再次設置為0，但僅在延遲0.3秒后。這將使效果看起來一致和自然。

.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
  opacity: 1;
  transform: translateY(0px);
  transition: transform 0.4s, opacity 0.1s;
}

我們不要忘記鏈接按鈕。

.cs-style-3 figcaption a {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

execcodegetcode

效果四

鼠標懸停效果四

execcodegetcode

效果五

鼠標懸停效果五

execcodegetcode

效果六

鼠標懸停效果六

execcodegetcode

效果七

鼠標懸停效果七

execcodegetcode

標簽: 鼠標懸停效果  hover  鼠標提示