在弹出图像上显示文本

Question

如何在放大的弹出图像上显示文本？

我想使用带有文本的 div 以显示在放大的缩放弹出图像上，我认为这可以通过 JavaScript 或 JQuery 完成，而无需单独使用 fancybox 应用程序。

但是，我找不到任何与此放大的缩放弹出效果类似的东西，文本出现在图像上。

$(document).ready(function() {
  $("#single_2").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    scrolling: 'no',
  });
});

#single_2 href {
  width: 120%;
  height: 100%;
  border: 2px solid red;
}

.fancybox-skin {
  position: relative;
  background: none;
  color: #444;
  text-shadow: none;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
}

.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.fancybox-inner {
  overflow: hidden !important;
}

.front-text {
  position: absolute;
  color: white;
  text-align: center;
}

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="https://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>
<a>
  <div id="single_2" href="http://farm1.staticflickr.com/756/22625719192_fdc3369588_b.jpg">
    <div class="front-text">Business</div>
    <img src="http://farm1.staticflickr.com/756/22625719192_fdc3369588_m.jpg" alt="" />
  </div>
</a>

Answer 1

你可以加<div id="single_2" href="http://farm1.staticflickr.com/756/22625719192_fdc3369588_b.jpg" title="My caption">

title="your text" 在上面的 div 中。

希望对你有帮助

$(document).ready(function() {
  $("#single_2").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    scrolling: 'no',
  });
});

#single_2 href {
  width: 120%;
  height: 100%;
  border: 2px solid red;
}

.fancybox-skin {
  position: relative;
  background: none;
  color: #444;
  text-shadow: none;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
}

.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.fancybox-inner {
  overflow: hidden !important;
}

.front-text {
  position: absolute;
  color: white;
  text-align: center;
}

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="https://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>
<a>
  <div id="single_2" href="http://farm1.staticflickr.com/756/22625719192_fdc3369588_b.jpg" title="My caption">
    <div class="front-text">Business</div>
    <img src="http://farm1.staticflickr.com/756/22625719192_fdc3369588_m.jpg" alt=""/>
  </div>
</a>

Answer 2

你可以使用这个css代码

.front-text { 
    display: none;
}
#single_2:hover  .front-text {
    display: block;
}

你不需要 JavaScript