How to make text and background colour appear over just the image when hovering

Question

I want an image to change colour (burgundy) when I hover over it, and show text at the same time (which relates to the image). I want the text and background colour to appear neatly over just the image (just covering the image only), but instead I get too much of the screen covered in burgundy (as shown in image below). I have created a jsfiddle which shows the problem I have. The image also needs to be responsive, so when hovering, the 'hover' effect will always just cover the image.

https://jsfiddle.net/cardiffsteve/hnow7yxp/

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/100/100/cats/">
  </div>
  <div class="colleague-text">
    <div class="colleague-name">Mr Big </div>
    <div class="colleague-job-title">The Boss </div>
    <div class="colleague-qualifications">Top Cat</div>
  </div>
</div>

#Profile-Picture {
  position: relative;
}

.colleague-text {
  position: absolute;
  top: 10px;
  left: 20px;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

#Profile-Picture:hover .colleague-text {
  visibility: visible;
  opacity: 1;
}

Praveen Kumar Purushothaman · Accepted Answer · 2016-03-04T10:41:56.303

Give inline-block to #Profile-Picture:

#Profile-Picture {
  position: relative;
  display: inline-block;
}

This will make the relatively positioned container to take the dimensions of its contents.

Preview:

Fiddle: https://jsfiddle.net/x7cv536d/

The other attempt is to make the text both vertically and horizontally aligned middle:

#Profile-Picture {
  position: relative;
  display: inline-block;
}

.colleague-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

.colleague-text .center {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  left: 0; right: 0;
  width: 100%;
}

#Profile-Picture:hover .colleague-text {
  visibility: visible;
  opacity: 1;
}

img {
  display: block;
  line-height: 1;
}

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/100/100/cats/">
  </div>
  <div class="colleague-text">
    <div class="center">
      <div class="colleague-name">Mr Big </div>
      <div class="colleague-job-title">The Boss </div>
      <div class="colleague-qualifications">Top Cat</div>
    </div>
  </div>
</div>

Preview:

I have used another div to scaffold for vertically centring.. :)

this is great, i need to change Top to zero and Left to zero, so the burgundy box covers the image properly. I notice there is a slight overlap at the bottom of the image, I wonder what causes that? — CardiffSteve, Mar 04 '16 at 10:41
@CardiffSteve Are you expecting the one like the second snippet? — Praveen Kumar Purushothaman, Mar 04 '16 at 10:47
i had a fix below thanks from @przemek, it needs a line height adjustment. No idea why but it works . I have this working perfectly now https://jsfiddle.net/cardiffsteve/4vLhsbxk/1/ — CardiffSteve, Mar 04 '16 at 10:57
@CardiffSteve What's the specific adjustment? I had already given `line-height` if you see! `:)` — Praveen Kumar Purushothaman, Mar 04 '16 at 10:59

Ray Hogan · Answer 2 · 2016-03-04T10:12:30.480

1

This worked for me:

#Profile-Picture {
  position: relative;
  display: inline-block;
}
.colleague-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}

Edit: Set top and left to 0, and add display: inline-block; to #Profile-Picture.

Result: Click to view image

edited Mar 04 '16 at 10:12

answered Mar 04 '16 at 10:05

Ray Hogan

319
3
12

What if the images were dynamically sized? – Praveen Kumar Purushothaman Mar 04 '16 at 10:05
In this case the width of the image is set inline to be 200px. Setting display: inline-block; on #Profile-Picture will work without setting a width on .colleague-text though. – Ray Hogan Mar 04 '16 at 10:11
thanks, almost there, how do i get the text nicely centred so its in the middle of the burgundy box on hover? – CardiffSteve Mar 04 '16 at 10:29
sorry, I can just use padding I guess. – CardiffSteve Mar 04 '16 at 10:30

score 1 · Answer 3 · answered Mar 04 '16 at 10:13

1

Just give display: table; to #Profile-Picture will make it as your expected.

Give transition:.6s all; to make hover effect nice.

And it works perfect if image is responsive Or it's size change.

Fiddle

answered Mar 04 '16 at 10:13

ketan

19,129
42
60
98

@PraveenKumar Yes. seriously. – ketan Mar 04 '16 at 10:37
@PraveenKumar any reason? – ketan Mar 04 '16 at 10:40
Table - Use only for tabular data not for layout purposes. – Praveen Kumar Purushothaman Mar 04 '16 at 10:43
@PraveenKumar i hear it first time. You should read it up first. https://developer.mozilla.org/en-US/docs/Web/CSS/display and https://css-tricks.com/almanac/properties/d/display/ – ketan Mar 04 '16 at 10:45
Sorry, but check these: [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html), [Table Layouts vs. Div Layouts: From Hell to… Hell?](https://www.smashingmagazine.com/2009/04/from-table-hell-to-div-hell/) – Praveen Kumar Purushothaman Mar 04 '16 at 10:46
@PraveenKumar i think that is for table layout v/s div not `display:table` it just make display like tabular. – ketan Mar 04 '16 at 10:48
Both `display: table` and it's `table-*` and `` are same buddy. General good thing is to avoid it. I am saying it from my experience of over five years. `:)`
– Praveen Kumar Purushothaman Mar 04 '16 at 10:49
@PraveenKumar Yeah and it's working fine there also. no any issue – ketan Mar 04 '16 at 10:51
Ha ha. LoL. Okay. I give up. – Praveen Kumar Purushothaman Mar 04 '16 at 10:51

score 0 · Answer 4 · answered Mar 04 '16 at 10:02

0

Move id="Profile-Picture" to the image tag.

answered Mar 04 '16 at 10:02

Arif Burhan

507
4
12

This doesn't work. `:(` Did you check your answer before posting? – Praveen Kumar Purushothaman Mar 04 '16 at 10:06

Przemek · Answer 5 · 2016-03-04T10:25:14.547

Give your div with id Profile-Picture style display: inline-block.

#Profile-Picture {
  display: inline-block;
  position: relative;
}
.colleague-text {
  position: absolute;
  top: 10px;
  left: 20px;
  bottom: 0;
  right: 0;
  background: rgba(142, 1, 60, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  text-align: center;
}
#Profile-Picture:hover .colleague-text {
  visibility: visible;
  opacity: 1;
}

<div id="Profile-Picture">
  <div class="colleague-image">
    <img width="200" height="200" alt="" src="http://lorempixel.com/200/200/cats/">
  </div>
  <div class="colleague-text">
    <div class="colleague-name">Mr Big</div>
    <div class="colleague-job-title">The Boss</div>
    <div class="colleague-qualifications">Top Cat</div>
  </div>
</div>

The reason why your burgundy color overlays more than just the image, is because Profile-Picture takes entire document width, as it has display: block by default.

There is still a small problem at the bottom, though. Add these rules to fix it:

#Profile-Picture {
  line-height: 0;
}
.colleague-text {
  line-height: 1em;
}

The reason is that your burgundy color will overlay div with id Profile-Picture, which is a bit bigger than the the image due to the fact that it also contains whitespaces and not just the image.

Preview after fixes:

How to make text and background colour appear over just the image when hovering

5 Answers5