Change text color on image hover
<p>Thanks to great guy I've discovered today possibility of changing color of the text when you hover of the div in that way:</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>div.button:hover span {
  color: rgb(88, 202, 230);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class='button'&gt;
    &lt;div class='svg bookmarks'&gt;&lt;/div&gt;
    &lt;span class=''&gt;Bookmarks&lt;/span&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>And a bit later I've tried to implement that kind of functionality on top of the image, but the result is not achieved, can you please explain what is done wrong and maybe the difference between cases.</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> img.button:hover p.text {
  color: rgb(88, 202, 230);
}

p {
  font-weight: 300;
  transition: color 1s ease;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'&gt;
    &lt;p class='text'&gt;Profile&lt;/p&gt;</code></pre>
</div>
</div>
</p>