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>

希望內嵌樣式的標題這有助於