оптимального селектора CSS при переходе на фоне при изменении размеров

Question

$(function(){ 
 
    $('div').click(function(){ 
 
    $('h3').toggleClass('collapsed'); 
 
    }); 
 
});

div { 
 
    background: url('http://deiaactivity.com/wp-content/uploads/2015/01/bgimage2.jpg'); 
 
    background-size:cover; 
 
    padding: 2em; 
 
} 
 
h3 { 
 
    padding: 12em 1em; 
 
    background: rgba(255,255,255,.5); 
 
    text-align: center; 
 
    color: white; 
 
} 
 
h3.collapsed { 
 
    padding: 6em 1em 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h3>Click me!</h3> 
 
</div>

Есть ли способ перехода влияние на фоновом изображении изменения размера?

-EDIT-

Я добавил, чтобы протестировать

* { 
    transition: 1s linear all; 
} 

И это возможно, но я не могу использовать этот фатальный (ха-ха) селектор в этом проекте, так что было бы правильная один (тот, который выбирает меньше детей из контейнера фонового изображения, но переводит фон при изменении размера)?

$(function(){ 
 
    $('div').click(function(){ 
 
    $('h3').toggleClass('collapsed'); 
 
    }); 
 
});

* { 
 
    transition: 1s linear all; 
 
} 
 
div { 
 
    background: url('http://deiaactivity.com/wp-content/uploads/2015/01/bgimage2.jpg'); 
 
    background-size:cover; 
 
    padding: 2em; 
 
} 
 
h3 { 
 
    padding: 12em 1em; 
 
    background: rgba(255,255,255,.5); 
 
    text-align: center; 
 
    color: white; 
 
} 
 
h3.collapsed { 
 
    padding: 6em 1em 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <h3>Click me!</h3> 
 
</div>

Answer 1

Попробуйте изменить правила CSS, как это:

h3 { 
    padding: 12em 1em; 
    background: rgba(255,255,255,.5); 
    text-align: center; 
    color: white; 
    -webkit-transition: all .25s ease; 
     -moz-transition: all .25s ease; 
      transition: all .25s ease; 
} 

Вот FIDDLE