Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Dan Sinclair
Dan Sinclair
1,420 Points

Text appearing on only one image on hover states

I am trying to to create a hover state over all thumbnail images where the text appears visible when hovering over the image. Right now, only the first image is accomplishing this.

.firstspan {
    display: none;
 }

.image-thumb:hover .firstspan {
    display: inline;
 }
  <div class="flexcontainer" style="position: relative; height:;">

    <article class="image-thumb">
          <a href="T-Shirt-3ajeeb!.html" title="Tasmeem-T">
            <span class="firstspan">
              Tasmeem T-Shirt 2015
           </span>

          <img src="Tasmeem-T-shirt02.png"/>


    </article>

    <article class="image-thumb" title="Tasmeem 2015 Website">
          <a href="Tasmeem-WebMockup.html">
            <span class="firstspan">
              Tasmeem 2015 Website
           </span>

          <img src="Tasmeem-2015-imacmockup-02.png"/>
    </article>

    <article class="image-thumb">
          <a href="Plazaar.html">
          <span class="firstspan">
              Plazaar Logo
           </span>
          <img src="Plazaar_Logo.png"/>
    </article>


     <article class="image-thumb">
          <a href="PLAZM-Box-of-Rocks.html">
          <span id="firstspan">
              PLAZM Magazine
           </span>
          <img src="Box_Rocks_Cover_Backdrop_WEBthumb.png"/>
    </article>


     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <span id="firstspan">
              Bling Rings Shoe Design
           </span>
          <img src="BlingRing_Shoes_THUMB.png"/>
    </article>


    <article class="image-thumb">
          <a href="VCUq-Bags.html">
          <span id="firstspan">
              Doha Bags
           </span>
          <img src="VCUq-Bags-THUMB.png"/>
    </article>



   </div> 

4 Answers

try this

.firstspan {
    display: none;
    position: absolute;
    width: 100%;
    background: rgba(255, 0, 0, 0.63);
    text-align: center;
    height: 30px;
    margin: auto;
    top: 0;
    bottom: 0;
}

.image-thumb:hover .firstspan {
    display: inline;
 }

.image-thumb {
position: relative;
width: 300px;
height: 300px; 
}

and you must close "a" tag :

 <article class="image-thumb">
      <a href="converse-rings-pattern.html">
                <span id="firstspan">
                          Bling Rings Shoe Design
                </span>
                <img src="BlingRing_Shoes_THUMB.png"/>
      <!-- add close tag --> </a>
</article>

'''

sorry for my english, i hope to help you

Dan Sinclair
Dan Sinclair
1,420 Points

This looks great! Way better than most online tutorials and other forums I was referencing for help. This works and helps make sense of everything.

Thank you, Essam!!!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,718 Points

My first thought is that you're putting your pseudo class on the wrong selector.

.firstspan {
    display: none;
 }

.image-thumb .firstspan:hover {
    display: inline;

Try the above and see if this makes a difference. :-) hope it helps

Dan Sinclair
Dan Sinclair
1,420 Points

Thank you for the feedback Jonathan. For some reason when I try this it cancels out any possibility for text appearing. Now there are no text hover states appearing on the first image, but also no text hover states on other images.

I'm not sure what I am doing wrong.

Dan Sinclair
Dan Sinclair
1,420 Points
/* Header Content */


header {

font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 300px;
letter-spacing: 1px;
margin: 40px auto 60px auto;
display: inline-block;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;


}

ul {
    list-style: none;

}

a:link {
    text-decoration: none;
}





/* Main Content */



article.image-thumb {
    position:relative;
    max-width:100%;
    min-width: 0;
    background:none;
    margin-left: 0%;

}

article.image-thumb img {
    width: 100%;
    height: 100%;
    border: 0;
    vertical-align: middle;

}

article.image-thumb {
    flex:;
}



.flexcontainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: space-around;



}

.flexcontainer {
    width: 100%;
    margin-top: 200px;
    max-width: 2560px;


}




/* ---------Thumbnail Styles------------ */



span {

    color: #32cd32;
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    position: absolute;

    width: 50%;
    padding: 10px 10px 6px 10px;
    margin: 100% 0 0 0%;
    background-color: #ffffff;
    text-decoration: none;

}





/* ---------HOVER STATES------------ */


 .firstspan {
    display: none;
 }

.image-thumb. .firstspan:hover  {
    display: inline;
 }
<!DOCTYPE html>
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>
  <meta charset="utf-8">
  <title>DAN SINCLAIR PORTFOLIO WEBSITE</title>
  <link rel="stylesheet" type="text/css" href="dan-sinclair-flex-CSS.css">
</head>  



<body>

    <header>
      <nav>
      <ul>
        <li><a href="http://dan-sinclair.com"> Projects</a></li>
        <li><a href="http://dan-sinclair.com/about"> About</a></li>
        <li><a href="http://dan-sinclair.com/cv-resume"> CV-Resume</a></li>
      </ul>
    </nav>

    </header>


  <div class="flexcontainer" style="position: relative; height:;">

    <article class="image-thumb">
          <a href="T-Shirt-3ajeeb!.html" title="Tasmeem-T">
            <span class="firstspan">
              Tasmeem T-Shirt 2015
           </span>

          <img src="Tasmeem-T-shirt02.png"/>


    </article>

    <article class="image-thumb" title="Tasmeem 2015 Website">
          <a href="Tasmeem-WebMockup.html">
            <span class="firstspan">
              Tasmeem 2015 Website
           </span>

          <img src="Tasmeem-2015-imacmockup-02.png"/>
    </article>

    <article class="image-thumb">
          <a href="Plazaar.html">
          <span class="firstspan">
              Plazaar Logo
           </span>
          <img src="Plazaar_Logo.png"/>
    </article>


     <article class="image-thumb">
          <a href="PLAZM-Box-of-Rocks.html">
          <span class="firstspan">
              PLAZM Magazine
           </span>
          <img src="Box_Rocks_Cover_Backdrop_WEBthumb.png"/>
    </article>


     <article class="image-thumb">
          <a href="converse-rings-pattern.html">
          <span class="firstspan">
              Bling Rings Shoe Design
           </span>
          <img src="BlingRing_Shoes_THUMB.png"/>
    </article>


    <article class="image-thumb">
          <a href="VCUq-Bags.html">
          <span class="firstspan">
              Doha Bags
           </span>
          <img src="VCUq-Bags-THUMB.png"/>
    </article>


   </div> 


</body>


</html>
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,718 Points

Try adding the hover to image-thumb then. :) :hover works by simply adding it to the same selector used twice.

But maybe someone out there can see something I'm missing? :-)

Dan Sinclair
Dan Sinclair
1,420 Points

Thank you for your help on this Jonathan!