在弹出的图像上显示文本

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" in the 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