悬停字幕叠加 [英] Caption overlay on hover

问题描述

我正在尝试获得一个简单的标题，该标题会在悬停时出现在我的缩略图上.目的是要单独拥有图像，然后在悬停时图像会淡出一点，标题会淡入上方.

I'm trying to achieve a simple caption that appears over my thumbnail images upon hover. The intention is to have the image by itself, then on hover, the image fades out a little, with the caption fading into view above.

我遇到的问题是，悬停功能可以正常工作，直到鼠标移到标题上方为止，然后鼠标将图像恢复为100％不透明

The problem I'm having is that the hover works fine until the mouse goes over the caption itself, which then returns the image to 100% opacity

<a href="#" class="thumbnail">

  <img src="img/placeholder1.jpg" alt="...">
  <span>caption</span>
</a>

CSS

a.thumbnail {
border:none;
border-radius: none;
padding:0;
margin:0;
position: relative;
background: #222;
}

a.thumbnail img {
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
opacity: 1; 
}


a.thumbnail img:hover {

opacity: 0.7;
}


a.thumbnail span {
color: #FFF;
position: absolute;
bottom: 40%;
width: 100%;
height: 20%;
padding: 10px;
opacity: 0; 
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}

a.thumbnail:hover span {
opacity: 1; 
}

推荐答案

将图像悬停在父div上.这样，当您将鼠标悬停在标题上时，不透明度将保持不变，就像您仍将鼠标悬停在父项上一样.

Move the image hover to the parent div. In this way the opacity will remain when hovering over the caption as you would still be hovering over the parent.

   a.thumbnail:hover img {
      opacity: 0.7;
    }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a.thumbnail {
  border: none;
  border-radius: none;
  padding: 0;
  margin: 0;
  position: relative;
  background: #222;
}
a.thumbnail img {
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  opacity: 1;
}
a.thumbnail:hover img {
  opacity: 0.7;
}
a.thumbnail span {
  color: #FFF;
  position: absolute;
  bottom: 40%;
  left: 0;
  width: 100%;
  padding: 10px;
  background: red;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
a.thumbnail:hover span {
  opacity: 1;
}

<a href="#" class="thumbnail">

  <img src="http://lorempixel.com/output/city-q-c-200-200-4.jpg" alt="..." />
  <span>caption</span>
</a>

这篇关于悬停字幕叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！