Question

我最近使用Wordpress和bootstrap。我试图在每个colum包含器上有1个图像，并在Hover上更改图像，但保留原始图像之前的文本。有什么办法用CSS3或我需要使用JS吗？这是我的HTML代码：

<?php get_header(); ?>

      <div class="page-header">
      <h1 class="titletxt">ECO GREECE</h1>
      </div>
      <div class="row">
          <div class="col-md-6 imageHolder img1">
            <div class="overlay img1">
              <span class="plus"> walking </span>
              </div>
           </div>
        <div class="col-md-6 imageHolder img2">
        <div class="overlay img2">
              <span class="plus"> walking </span>
              </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 imageHolder img3">
        <div class="overlay img3">
              <span class="plus"> marine tour </span>
              </div>
        </div>
        <div class="col-md-6 imageHolder img4">
        <div class="overlay img4">
              <span class="plus"> birds watching </span>
              </div>
        </div>
      </div>


<?php get_footer(); ?>

这是CSS：

.imageHolder {
    position: relative;
}
.imageHolder.img1 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bear.png') no-repeat;
    background-size: cover;
    height: 420px;
    background-position: center center;
}
.imageHolder.img2 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bridge.png') no-repeat;
    background-size: cover;
    height: 420px;
    background-position: center center;
}
.imageHolder.img3 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/couple.png') no-repeat;
    background-size: cover;
    height: 420px;
    background-position: center center;
}
.imageHolder.img4 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bird.png') no-repeat;
    background-size: cover;
    height: 420px;
    background-position: center center;
}

.overlay {
    background-repeat:no-repeat;
    position: relative;
    text-align: center;
    opacity: 0;
    padding:180px 0 100px 0;
    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;

}
.overlay.img1 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bear_over.png') no-repeat;
    height: 420px;
    background-position: center center;
    background-size: cover;
}
.overlay.img2 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bridge_over.png') no-repeat;
    height: 420px;
    background-position: center center;
    background-size: cover;
}
.overlay.img3 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/couple_over.png') no-repeat;
    height: 420px;
    background-position: center center;
    background-size: cover;
}
.overlay.img4 {
    background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bird_over.png') no-repeat;
    height: 420px;
    background-position: center center;
    background-size: cover;
}
.imageHolder:hover .overlay {
    opacity: 1;
}
.ec-imageText {
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
    opacity: 1;
    padding:180px 0 100px 0;
}
.plus {
    position: relative;
    opacity: 1;
    font-family: myriadpro;
    color:rgba(255,255,255,.85);
    font-size: 45px;
}

使用此代码，图片会在悬停时更改并显示一些文字，但我也想要原始图片上的文字..

Answer 1

我不完全理解你的问题，但我会给出一个机会。使用:hover选择器更改url()的{{1}} 我为你做了一个非常简单的fiddle。

Answer 2

能够独立运行这段代码来调试

真的很有帮助

placeholder to submit

http://jsfiddle.net/d7ohv42j/

我为你做了一个JSfiddle，但没有外部链接，我甚至无法看到你可能会遇到什么样的错误，特别是如果它是显示错误

将检查

在悬停时更改图片并保留文字

2 个答案: