1

I am trying to display images on my site side by side, when you hover over them a gradient appears as well as some text describing the name of the project. I have been attempting this by using figures and figcaptions but have made a lot of progress but I can't get a few things figured out.

1) How to make the caption only display over the image (right now it displays over the image but there is an empty space where the text would be without the CSS)

2) How to align the images side by side, right now they are not displaying evenly.

3) How to make the caption text appear only on hover

My site is here, figures are at the bottom of the page: http://example4.inivex.com

Here is my CSS:

.test a {
position: relative;
display: inline-block;
border: 1px solid;
/*float:left;*/
width:300px;
height:240px;
margin:5px;
}

.test a:hover:before {
content: '';
display: block;
border: 0px solid;
background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
width: 300px;
height: 240px;
position: absolute;
top: 0;
right: 0;
}

figure {
float:left;
width:300px;
height:240px;
margin:5px;
}

.test figcaption {
position: relative;
top: -30px;
left: 15px;
}

And here is my HTML on the page:

<h3 style= "text-align: center;">Our Work</h3>
<br><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img         src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300"     height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br>

<figure  class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br>
user3285523
  • 25
  • 1
  • 1
  • 6
  • you can use display:inline-block instead float, but you should , anyhow remove the
    tag in between
    . did you check these already ? http://stackoverflow.com/search?q=[css]evenly
     – G-Cyrillus Feb 07 '14 at 21:30
  • Awesome, I took out the break tags, looked at the links and used one of them to fix the text issue. When I use inline-block instead of float, the figures align themselves in one vertical column and don't space out? The last major issue I can't solve is the spacing/padding between the images, I would like to stick a 3-5px margin in between them but it's not working. – user3285523 Feb 07 '14 at 21:41

1 Answers1

2

Here you go...

Codepen Demo

HTML

As your post except I added a wrapper div and took out the break tags

CSS

.wrapper {
  text-align:center;
}

figure {
  display: inline-block;
  border:1px solid grey;
  position: relative;
  overflow:hidden;
}

figure a {
  display: block;
}

figure:hover:before {
  content: '';
  display: block;
  background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

figcaption {
  position: absolute;
  height:50px;
  line-height:50px;
  background-color: grey;
  bottom:-50px;
  width:100%;
  transition: bottom 0.5s ease;
}

figure:hover figcaption {
  bottom:0;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Hey, so I put in the code exactly as it was in CodePen and it is still displaying vertically so I am guessing it is something on my site. I made sure there weren't any conflicting pieces of old code. It looks like something with the figure (http://screencast.com/t/rwg77CC9O). It's can't be the sizing, the column in 940px wide and the pictures are only 300px wide, that should work? – user3285523 Feb 08 '14 at 04:20
  • I found the issue I believe, if I disable this inline-block (highlighted area: http://screencast.com/t/u2qbXenGa) everything runs smoothly. The only trouble is that I can't find it, that line shows up in the developer toolbar but not in the actual file. I'm pretty sure it wouldn't be wise to just delete it anyways, probably rather add something in that would get called later and override it? Thank you so much for your help by the way!!! – user3285523 Feb 08 '14 at 04:34
  • I figured it out, just took some sleuthing and poking around. I probably did it incorrectly but it will work for now. Thank you again! – user3285523 Feb 08 '14 at 04:40