 <p>As mentioned in my comment above <strong>permanent</strong> changes would require Javascript.</p> <p>However, a <strong>semi-permanent</strong> effect can be faked using a very long transition-duration on the base state and a short transition on the 'returning' <code>:hover</code> state.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#smith { background-color: transparent; height: 87px; width: 383px; border: 1px solid red; margin: 25px; background: url("http://lorempixel.com/400/200/sports/") no-repeat center; } #smith img.top { display: block; margin: 0 auto; opacity: 1; transition: opacity 999s ease; } #smith img.top:hover { opacity: 0; transition: opacity .5s; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="smith"&gt; &lt;img class="top" src="http://i.imgur.com/D6Kohra.png" /&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>For the background-image, these cannot be transitioned. Therefore I suggest a pseudo-element solution.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#smith { background-color: transparent; height: 87px; width: 383px; border: 1px solid red; margin: 25px; position: relative; } #smith:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("http://lorempixel.com/400/200/sports/") no-repeat center; z-index: -1; opacity: 0; transition: opacity 999s ease; } #smith:hover:before { z-index: -1; opacity: 1; transition: opacity .5s; } #smith img.top { display: block; margin: 0 auto; opacity: 1; transition: opacity 999s ease; } #smith img.top:hover { opacity: 0; transition: opacity .5s; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="smith"&gt; &lt;img class="top" src="http://i.imgur.com/D6Kohra.png" /&gt; &lt;/div&gt;</code></pre> </div> </div> </p>