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

Posted by Adrian Elizalde
Adrian Elizalde
4,939 Points

Center title with image (hover)

I have a responsive div with an image and a title (opacity=0). When I hover on top of the image, the image fades and the title appears (opacity=1). I have managed to make that the title hovers when I am on top of the image (not only on top of the text). Until here everything is fine.

I CAN'T manage to center the text in the image!!! (if I add to thumb_title {height:1em;} the title centers vertically but then it doesn't hover when I am on top of the image)

**Mod Note: Updated post for forum markdown

HTML:

<div class="project_item">
              <img src="http://payload319.cargocollective.com/1/10/320079/8699398/prt_1100x760_1474905371.jpg" alt="prueba"/>
              <div class="thumb_title">prueba 2</div>
            </div>

CSS:

.project_item {
  position: relative;
  opacity: .3;
}

.thumb_title {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 10;
  opacity: 0;
  text-transform: uppercase;
  color: black;
  text-align: center;
}

Many thanks

4 Answers

Bart Merkus
Bart Merkus
28,462 Points

Hello Adrian,

It seems to me that you're trying to use a lot of different methods to try and make this work. This is how I would do it: (Not sure if the syntax for this forum is right, but you can copy it)

<div class="project_item">
              <img src="http://payload319.cargocollective.com/1/10/320079/8699398/prt_1100x760_1474905371.jpg" alt="prueba"/>
              <div class="thumb_title"><h1>prueba 2</h1></div>
            </div>

.project_item {
  position: relative;
}

.project_item:hover > .thumb_title {
  opacity: 1;
  transition: .3s;
}

.project_item:hover > img {
  opacity: .3;
  transition: .3s;
}


.project_item img {
  display: block;
  margin: 0 auto;
  opacity: 1;
  transition: .3s;
}

.thumb_title {
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: .3s;
}

.thumb_title h1 {
  position: absolute;
  top: calc(50% - 18.5px); /* Halfway from the top - half of the height of the text   */
  left: calc(50% - 61px); /* Halfway from the left - half of the width of the text   */
}

The last bit of CSS is how to center your text. This only works when your text has a set width and height (px). If you don't have a set width and height, i recommend Flexbox.

Let me know if this has helped.

Greetings

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Try adding a top position of 50% to the thumb text.

You could also add a block display and define margins of a top to bottom of 50%.

You probably also want to add the opacity back to 50% on hover.

.project_item:hover {
  opacity: 1;
}
Adrian Elizalde
Adrian Elizalde
4,939 Points
Adrian Elizalde
Adrian Elizalde
4,939 Points

If I add a top 50% position to the thumb text it centers the text with the image, but then the text doesn't hover when going on the top part of the image. I also couldn't manage to margins so that the text was centered.

I not sure is a good solution, I did is: add an h2 (.title) to the div. Although when giving top and left position it centers the first letter of text (not completely centered the whole text):

HTML: <div class="project_item"> <img src="http://payload319.cargocollective.com/1/10/320079/8699398/prt_1100x760_1474905371.jpg" alt="prueba"/> <div class="thumb_title"> <h2 class="title">Hello</h2> </div> </div>

CSS: .project_item { position: relative; opacity: .3; }

.thumb_title { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 10; opacity: 0; text-transform: uppercase; color: black; text-align: center; }

.title { position: absolute; top: 50%; left: 50%; margin: auto; }

Adrian Elizalde
Adrian Elizalde
4,939 Points
Adrian Elizalde
Adrian Elizalde
4,939 Points

Hi Bart,

It worked! Thanks a lot for the explanation, to not only solve the problem but to understand it also.

Bests

Bart Merkus
Bart Merkus
28,462 Points

You're welcome! Best of luck with your project!