CSS:如何只转换背景而不转换里面的内容

Question

小提琴：https://jsfiddle.net/jzhang172/Lhpx8u3g/

在我的每个框中，字体都会随着我的背景按大小进行转换，我该如何专门使其仅转换背景而我的字体大小保持不变？

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
div#middlebottom {
    border-top: 5px solid white;
      display: flex;
    flex-wrap:wrap;
}
.bottom-section{
      border: 3px solid white;
    border-right: 1.5px;
  width:50%;
  height:300px;
      display: flex;
    justify-content: center;
    align-items: center;
  background:gray;
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
}
.bottom-section h2{
  font-size:6em;
  font-family:Nothing You Could Do;
  color:white;
      text-shadow: 2px 2px 2px #6B6B6B;
}
#articles .bottom-wrap{
  background:url('img/bottom/1.jpg');
      background-repeat: no-repeat;
    background: 13% auto;
    background-position-y: -234px;
    background-size: 100% auto;
}
#projects .bottom-wrap{
  background:url('img/bottom/2.jpg');
      background-repeat: no-repeat;
    background: 13% auto;
    background-position-y: -234px;
    background-size: 100% auto;
    transition:1s;
}
#articles h2,#projects h2{
  z-index:5;
}
.bottom-wrap:before{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  content:"";
  background-color:rgba(0, 0, 0, 0.65);
  transition:1s;
}
.bottom-wrap:hover{
  transform: scale(1.21);
}
.bottom-wrap:hover h2{
  color:#4DE5FF;
}
#articles .bottom-wrap:hover:before{
  background-color:white;
}
#projects .bottom-wrap:hover:before{
  background-color:white;
}
.bottom-wrap{
        display: flex;
    justify-content: center;
    align-items: center;
  height:100%;
  width:100%;
   transition:1s;
}
.image-mover h2{
  font-size:4em;
  color:white;
  font-family:raleway;
}
.image-mover span.featured-text{
  font-size:.7em;
  background:none;
  color:#6686FF;
}
span.featured-thing{
  color:green;
}
.featured-wrap:before{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  content:"";
  background-color:rgba(0, 0, 0, 0.65);
  transition:1s;
}
.featured-wrap:hover:before{
  background-color:rgba(255, 255, 255, 0);
}
.featured-wrap:hover{
  transform: scale(1.21);
}
.featured-wrap{
  flex-direction: column;
  background:url('http://www.intrawallpaper.com/static/images/backgrounds_2_9AyfSD9.jpg');
      height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
            display: flex;
    align-items: center;
    justify-content: center;
    transition:1s;
  }
  .featured-wrap h2{
          text-shadow: 2px 2px 2px black;
          transition:1s;
          z-index:3;
  }
  .featured-wrap:hover h2{
  color:#4DE5FF;
  font-size:6em;
}
.image-mover {
    overflow: hidden;
    height: 300px;
    width: 100%;
}

<div class="section" id="middlebottom">
      <div class="image-mover">
        <div class="featured-wrap">
   <h2><span class="featured-text">hello |</span> <span class="featured-thing">Text</span></h2>
   <h3 class="descrip">A Description.</h3>
   </div>
     </div>
 
<div class="bottom-section" id="articles">
  <div class="bottom-wrap">
  <h2>Articles</h2>
  </div>
</div>
<div class="bottom-section" id="projects">
    <div class="bottom-wrap">
      <h2>Projects</h2>
    </div>
  </div>
   </div>

Answer 1

这是出现问题的地方

.bottom-wrap:hover h2 {

悬停效果继承了文本颜色。您可以将其完全取出，也可以将标题样式内联<h2 style="color:white">Articles</h2>

希望这有帮助