Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Change style of Paragraph <p> when user hovers over an image above.

Hi everyone,

Long story short, I've got a section on my website, where 3 images are shown in a row with caption written beneath these images using Paragraph <p>, like shown here: http://d.pr/i/1ftbB .

Now, I would like to make it so that when a user hovers (:hover) over the image, the caption below the image should change its colour to: #E48210.

So far I have managed to achieve the effect, where when the user hovers over the caption itself, it changes its colour, like so: http://d.pr/v/1kpSA .

I have the following HTML code for this section:

<div id="wrapper">
            <section>
              <ul id="service">
                <li><a href=""><img src="images/services/service-1.png" alt="автомобильные перевозки"><p>Автомобильные</br>перевозки</p></a></li>
                <li><a href=""><img src="images/services/service-2.png" alt="железнодорожные перевозки"><p>Железнодорожныe</br>перевозки</p></a></li>
                <li><a href=""><img src="images/services/service-3.png" alt="морские перевозки"><p>Морские</br>перевозки</p></a></li>
                <li><a href=""><img src="images/services/service-4.png" alt="таможенные услуги"><p>Таможенные</br>услуги</p></a></li>
                <li><a href=""><img src="images/services/service-5.png" alt="сборные грузы и складирование"><p>Сборные грузы</br>и складирование</p></a></li>
                <li><a href=""><img src="images/services/service-6.png" alt="перевозка опасных грузов"><p>Перевозка</br>опасных грузов</p></a></li>
              </ul>
            </section>
          </div>

And here is my CSS for this section:

#service p:hover {
  color: #E48210;
}

So, the question is, how do I write CSS, which would do the following:

  • Change the color of Paragraph below Image to #E48210 when user :hovers over Image.

Thank you very much in advance!

Any help would be highly appreciated.

2 Answers

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Very simple example:

HTML

<div class="container">
    <img src="http://s.hswstatic.com/gif/landscape-photography-1.jpg" alt="">
    <p>THIS IS SOME TEXT!</p>
</div>

CSS

.container:hover p{
color: green;
}

The .container is the div holding both your image and your paragraph tag. Simply change your code to fit your needs.

Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Awesome. Thanks. No idea why I haven't thought about it at the first place, but thanks a lot for the help!

Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Lucas,

One more question. It all works now, however, it works in a way that when I hover over any image, all Captions change their Color to #E48210, whereas I would like only a certain Caption (the one below the Image) to change its Colour.

Here's my CSS:

#service:hover p  { /* Change <p> color when :hover over image */
  color: #E48210;
   -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
}

As far as I understand, I need to add unique id's to each of li's in my html:

<div id="wrapper">
            <section>
              <ul id="service">
                <li><a href=""><img src="images/services/service-1.png" alt="автомобильные перевозки"><p>Автомобильные</br>перевозки</p></a></li>
                <li><a href=""><img src="images/services/service-2.png" alt="железнодорожные перевозки"><p>Железнодорожныe</br>перевозки</p></a></li>
                <li><a href=""><img src="images/services/service-3.png" alt="морские перевозки"><p>Морские</br>перевозки</p></a></li>
                <li><a href=""><img src="images/services/service-4.png" alt="таможенные услуги"><p>Таможенные</br>услуги</p></a></li>
                <li><a href=""><img src="images/services/service-5.png" alt="сборные грузы и складирование"><p>Сборные грузы</br>и складирование</p></a></li>
                <li><a href=""><img src="images/services/service-6.png" alt="перевозка опасных грузов"><p>Перевозка</br>опасных грузов</p></a></li>
              </ul>
            </section>
</div>

Or maybe there is a better way of doing it? Any suggestions?

Lucas Santos
Lucas Santos
19,315 Points
Lucas Santos
Lucas Santos
19,315 Points

Aleksandrs Karevs Just use li instead of #service like this:

li:hover p{
  color: #E48210;
   -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
}

or if you wanted to be more specific do:

#service li:hover p{
  color: #E48210;
   -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
}
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

I have managed to do it the following way:

My html now looks like this:

<div id="wrapper">
            <section>
              <ul id="service">
                <li id="service-1"><a href=""><img src="images/services/service-1.png" alt="автомобильные перевозки"><p>Автомобильные</br>перевозки</p></a></li>
                <li id="service-2"><a href=""><img src="images/services/service-2.png" alt="железнодорожные перевозки"><p>Железнодорожныe</br>перевозки</p></a></li>
                <li id="service-3"><a href=""><img src="images/services/service-3.png" alt="морские перевозки"><p>Морские</br>перевозки</p></a></li>
                <li id="service-4"><a href=""><img src="images/services/service-4.png" alt="таможенные услуги"><p>Таможенные</br>услуги</p></a></li>
                <li id="service-5"><a href=""><img src="images/services/service-5.png" alt="сборные грузы и складирование"><p>Сборные грузы</br>и складирование</p></a></li>
                <li id="service-6"><a href=""><img src="images/services/service-6.png" alt="перевозка опасных грузов"><p>Перевозка</br>опасных грузов</p></a></li>
              </ul>
            </section>
</div>

i.e. I have added unique id's to each of the services listed on my website.

and this is how my CSS looks like now:

#service-1:hover p, #service-2:hover p, #service-3:hover p,
#service-4:hover p, #service-5:hover p, #service-6:hover p { 
  color: #E48210;
   -o-transition:.3s;
  -ms-transition:.3s;
  -moz-transition:.3s;
  -webkit-transition:.3s;
  transition:.3s;
}

Not sure, maybe there's a better way of doing it, but at least it works :)

onuniku
onuniku
5,394 Points
onuniku
onuniku
5,394 Points

Instead of using id's (service-1, service-2 > service-6) use class'es.

<div id="wrapper"> <section> <ul id="service"> <li class="service-main"><a href=""><img src="images/services/service-1.png" alt="автомобильные перевозки"><p>Автомобильные</br>перевозки</p></a></li> <li class="service-main"><a href=""><img src="images/services/service-2.png" alt="железнодорожные перевозки"><p>Железнодорожныe</br>перевозки</p></a></li> <li class="service-main"><a href=""><img src="images/services/service-3.png" alt="морские перевозки"><p>Морские</br>перевозки</p></a></li> <li class="service-main"><a href=""><img src="images/services/service-4.png" alt="таможенные услуги"><p>Таможенные</br>услуги</p></a></li> <li class="service-main"><a href=""><img src="images/services/service-5.png" alt="сборные грузы и складирование"><p>Сборные грузы</br>и складирование</p></a></li> <li class="service-main"><a href=""><img src="images/services/service-6.png" alt="перевозка опасных грузов"><p>Перевозка</br>опасных грузов</p></a></li> </ul> </section> </div>

CSS: .service-main: hover p { color: #E48210; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; }

But i don't see your paragraph in the code :)