0

I have been able to show a description when hovering over an image while having the image stay centered and responsive to scaling thanks to How to show text on image when hovering?. However, when I attempt to scale out too much the description begins to escape the boundaries of the image it's supposed to overlay.

Here's the code responsible for the above. Any suggestions are welcome.

HTML

<div class= "img__wrap">
    <img src="Capture.JPG" alt= "Website"/>
    <p class= "img__description">The website you're on!</p>
</div>

CSS

 img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.img__wrap {
    position: relative;
    max-width: 100%;
    height: auto;
}

.img__description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #544f50;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    padding: 10%;
    transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
    visibility: visible;
    opacity: 0.75;
}
dnsalter
  • 1
  • 1
    could you please post a running code snippet so we can see a reproduction of your problem?? thanks! – JV Lobo Jun 25 '17 at 02:14
  • Here's a jsfiddle https://jsfiddle.net/2evL6oyo/ . Can already see the issue here with the image, the text wrap appears outside of the image until you zoom in where it won't shrink any smaller than the image. – dnsalter Jun 25 '17 at 11:11

1 Answers1

0

Use of box-sizing:border-box and margin:0 for .img__description.

.img__wrap {
    position: relative;
    height: auto;
}

 img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.img__description {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    box-sizing: border-box;
    background: #544f50;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    padding: 10%;
    transition: opacity .2s, visibility .2s;
    margin: 0;
}

.img__wrap:hover .img__description {
    visibility: visible;
    opacity: 0.75;
}
<div class= "img__wrap">
    <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt= "Website"/>
    <p class= "img__description">The website you're on!</p>
</div>
Ehsan
  • 12,655
  • 3
  • 25
  • 44