Comment puis-je appliquer une transformation de survol à une image d'arrière-plan CSS sans transformer le contenu?

Question

J'essaye d'appliquer this sort of overlay effect à une image de fond sur le vol stationnaire. Cependant, je veux seulement que cette transformation s'applique à l'image d'arrière-plan, pas au texte ou autre contenu dans la div.

Voici mon code au moment, sans aucun effet de vol stationnaire - l'approche du lien W3Schools ne semble pas au-dessus approprié:

.background-image { 
 
    background: url('http://placehold.it/350x200') no-repeat center; 
 
} 
 

 
.about-text { 
 
    color: #ffffff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-md-6 text-center background-image overlay"> 
 
    <div class="about-text"> 
 
    <p>Some descriptive text here. Blah blah blah.</p> 
 
    <p class="text-center"><a class="btn btn-primary" href=""> Button </a></p> 
 
    </div> 
 
</div>

Answer 1

Est-ce ce que vous voulez? See this fiddle

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 


<div class="col-md-6 text-center background-image overlay"> 
    <div class="background"></div> 
    <div class="about-text"> 
    <p>Some descriptive text here. Blah blah blah.</p> 
    <p class="text-center"><a class="btn btn-primary" href=""> Button </a></p> 
    </div> 
</div> 

CSS .background image {

height: 200px; 
} 
.background { 
    background: url('http://lorempicsum.com/futurama/350/200/1') no-repeat center; 
    position: absolute; width: 350px; height: 200px; 
} 

.about-text { 
    color: #ffffff; 
    position: absolute; 
    height: 200px; 
    width: 350px; 
transition: all 0.5s; 
} 

.background-image:hover .about-text { background: #333} 

Answer 2

Je ne suis pas sûr que je comprends ce que vous « re demander, je pense qu'il est quelque chose comme ceci:

.background-image { 
 
    background: url('http://placehold.it/350x200') no-repeat center; 
 
} 
 

 
.overlay { 
 
    transition: background-position 250ms ease-in-out; 
 
} 
 

 
.overlay:hover { 
 
    background-position: center -100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="col-md-6 text-center background-image overlay"> 
 
    <div class="about-text"> 
 
    <p>Some descriptive text here. Blah blah blah.</p> 
 
    <p class="text-center"><a class="btn btn-primary" href=""> Button </a></p> 
 
    </div> 
 
</div>