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
Dan Sinclair
1,420 PointsText 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
essam Bahassan
298 Pointstry 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
Jonathan Grieve
Treehouse Moderator 91,253 PointsMy 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
1,420 PointsThank 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
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
Treehouse Moderator 91,253 PointsTry 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
1,420 PointsThank you for your help on this Jonathan!
Dan Sinclair
1,420 PointsDan Sinclair
1,420 PointsThis 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!!!