Change Text Color On Image Hover

Thanks to great guy I've discovered today possibility of changing color of the text when you hover of the div in that way: And a bit later I've tried to implement that kind of fun

Solution 1:

try adding ~

img.button:hover ~ p.text {
  color: rgb(88, 202, 230);
}

p {
  font-weight: 300;
  transition: color 1s ease;
}

<imgclass='button'src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'><pclass='text'>Profile</p>

Solution 2:

Use + CSS selector:

img.button:hover + p.text {
  color: rgb(88, 202, 230);
}

p {
  font-weight: 300;
  transition: color 1s ease;
}

<imgclass='button'src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'><pclass='text'>Profile</p>

Solution 3:

In a CSS selector, a space mean "is a child of", so the way your selector is working says when an img tag with class "button" is hovered over, select the child p tag with class text and change the color.

Instead use the adjacent sibling selector (+) to say that it is a sibling and not a child

img.button:hover + p.text {
  color: rgb(88, 202, 230);
}

p {
  font-weight: 300;
  transition: color 1s ease;
}

<imgclass='button'src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'><pclass='text'>Profile</p>

Solution 4:

Your selector is wrong because that paragraph is not a child of the image. Using a common container would fix it:

.c:hoverp.text {
  color: rgb(88, 202, 230);
}

p {
  font-weight: 300;
  transition: color 1s ease;
}

<divclass="c"><imgclass='button'src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'><pclass='text'>Profile</p></div>