卡卡網(wǎng)

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

鼠標(biāo)移到圖片上顯示標(biāo)題或說(shuō)明文字

demo

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

標(biāo)記

HTML網(wǎng)格(grid)和圖形(figure)的結(jié)構(gòu)將由無(wú)序列表組成，每個(gè)項(xiàng)目將包含一個(gè)figure元素。 該figure將包含一個(gè)圖片和一個(gè)帶有一些文本元素和鏈接的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>

這是所有網(wǎng)格(figure)示例的默認(rèn)結(jié)構(gòu)。每個(gè)單一效果的類將添加到列表中，所以示例1將具有“cs-style-1”，示例2將具有“cs-style-2”等等。

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

CSS

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

.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;
}

使列表項(xiàng)顯示為內(nèi)聯(lián)塊將允許我們將它們居中應(yīng)用于父級(jí)的居中文本對(duì)齊。

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

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

 figcaption位置設(shè)置為絕對(duì)(absolute)，我們需要確保它在figure里面， 默認(rèn)情況下，它將位于左上角，我們不會(huì)在這里定義任何寬度或高度，因?yàn)槲覀儗⒃谒袉为?dú)的樣式中定義：

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

圖像的最大寬度為100％，當(dāng)我們定義媒體查詢以調(diào)整列表項(xiàng)的大小時(shí)，它將派上用場(chǎng)：

.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添加內(nèi)容“by”。 當(dāng)然，您可以在HTML中添加它，但在css里使您可以更加輕松地將其更改為“make by”或“Designer:”或類似內(nèi)容。

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

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

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

效果一

鼠標(biāo)懸停效果一

讓我們從一個(gè)非常簡(jiǎn)單的效果開(kāi)始。我們希望標(biāo)題淡入并向右和向下移動(dòng)一點(diǎn)，從而產(chǎn)生從圖像中出來(lái)的3D圖層的錯(cuò)覺(jué)。

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

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

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

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

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

另外，設(shè)置文本位置：

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

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

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

execcodegetcode

效果二

鼠標(biāo)懸停效果二

這個(gè)效果會(huì)將圖像向上移動(dòng)并顯示出圖形。

因此，讓我們?yōu)閳D像添加轉(zhuǎn)換過(guò)渡并使其在懸停時(shí)向上移動(dòng)：

.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設(shè)置為10，以便圖像保持在標(biāo)題之上。

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

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

我們還將鏈接按鈕放在右側(cè)：

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

execcodegetcode

 效果三

鼠標(biāo)懸停效果三

效果三看起來(lái)好像標(biāo)題稍微推動(dòng)了圖像。

首先，我們需要將圖的溢出設(shè)置為隱藏，這樣我們?cè)谝苿?dòng)時(shí)不會(huì)看到任何溢出的東西：

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

圖像需要過(guò)度(transition)以進(jìn)行轉(zhuǎn)換(transform)，并且在懸停(hover)時(shí)我們會(huì)將其轉(zhuǎn)換為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將比前一個(gè)例子略高， 我們還為變換(transform)和不透明度(opacity)添加一個(gè)過(guò)渡(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)時(shí)，我們將不透明度(opacity)設(shè)置為1并將其轉(zhuǎn)變(translate)過(guò)來(lái)。 看看我們是如何添加兩個(gè)過(guò)渡的？ 一個(gè)用于正常狀態(tài)，一個(gè)用于懸停？這是我們?nèi)绾慰刂茟彝：筒粦彝r(shí)發(fā)生的事情。 此處的轉(zhuǎn)換將應(yīng)用于懸停：我們希望元素快速變?yōu)椴煌该?，同時(shí)需要0.4秒進(jìn)行轉(zhuǎn)換。當(dāng)我們將鼠標(biāo)懸停時(shí)，不透明度將再次設(shè)置為0，但僅在延遲0.3秒后。這將使效果看起來(lái)一致和自然。

.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

效果四

鼠標(biāo)懸停效果四

execcodegetcode

效果五

鼠標(biāo)懸停效果五

execcodegetcode

效果六

鼠標(biāo)懸停效果六

execcodegetcode

效果七

鼠標(biāo)懸停效果七

execcodegetcode

標(biāo)簽: 鼠標(biāo)懸停效果  hover  鼠標(biāo)提示