How to show text on image when hovering?

Html Problem Overview

I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image.

I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.

Feel free to poke around in my code, I'll paste what I think is relavent here.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

<div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>

  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>

Html Solutions

Solution 1 - Html

It's simple. Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.

/* quick reset */

{ margin: 0; padding: 0; border: 0; }

/* relevant styles */ .img__wrap { position: relative; height: 200px; width: 257px; }

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

A nice fiddle: https://jsfiddle.net/govdqd8y/

EDIT:

There's another option if you don't want to explicitly set the height of the <img> on the wrapping <div>, and that is simply setting the <div>'s display to inline-block. (Keep in mind, though, that it won't look good if the image fails to load.)

If you choose this option, you'll notice that there'll be a slight spacing between the <img> and the bottom of the wrapping <div>. That's because of the <img>'s default vertical-align value of baseline. If you set it to bottom it will disappear.

Here's a fiddle using this option: https://jsfiddle.net/joplomacedo/5cL31o0g/

Solution 2 - Html

In your HTML, try and put the text that you want to come up in the title part of the code:

<a  href="buzz.html" title="buzz hover text">

You can also do the same for the alt text of your image.

Solution 3 - Html

You can also use the title attribute in your image tag

<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />

Solution 4 - Html

This is what I use to make the text appear on hover:

* {
  box-sizing: border-box
}

div {
  position: relative;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center
}

img {
  width: 400px;
  height: 400px;
  position: absolute;
  border-radius: 50%
}

img:hover {
  opacity: 0;
  transition:opacity 2s;
}

heading {
  line-height: 40px;
  font-weight: bold;
  font-family: "Trebuchet MS";
  text-align: center;
  position: absolute;
  display: block
}

div p {
  z-index: -1;
  width: 420px;
  line-height: 20px;
  display: inline-block;
  padding: 200px 0px;
  vertical-align: middle;
  font-family: "Trebuchet MS";
  height: 450px
}

<div>
  <img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
  </p>
</div>

Solution 5 - Html

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head></head>
<body>

<div class="container">
  <img src="http://lorempixel.com/500/500/" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Reference Link W3schools with multiple styles

Solution 6 - Html

I saw a lot of people use an image tag. I prefer to use a background image because I can manipulate it. For example, I can:

Add smoother transitions
save time not having to crop images by using the "background-size: cover;" property.

The HTML/CSS:

.overlay-box {
  background-color: #f5f5f5;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay-box:hover .desc,
.overlay-box:focus .desc {
  opacity: 1;
}

/* opacity 0.01 for accessibility */
/* adjust the styles like height,padding to match your design*/
.overlay-box .desc {
  opacity: 0.01;
  min-height: 355px;
  font-size: 1rem;
  height: 100%;
  padding: 30px 25px 20px;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

<div class="overlay-box" style="background-image: url('https://via.placeholder.com/768x768');">
  <div class="desc">
    <p>Place your text here</p>
    <ul>
      <li>lorem ipsum dolor</li>
      <li>lorem lipsum</li>
      <li>lorem</li>
    </ul>
  </div>
</div>

Solution 7 - Html

HTML
<img id="close" className="fa fa-close" src="" alt="" title="Close Me" />

CSS
#close[title]:hover:after {
  color: red;
  content: attr(title);
  position: absolute;
  left: 50px;
}

Solution 8 - Html

<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nelsonleite/pen/RaGwba?depth=everything&order=popularity&page=4&q=product&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">.product-description {
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  perspective: 1000;
  backface-visibility: hidden;
}

body {
  color: #212121;
}

.container {
  padding-top: 25px;
  padding-bottom: 25px;
}

img {
  max-width: 100%;
}

hr {
  border-color: #e5e5e5;
  margin: 15px 0;
}

.secondary-text {
  color: #b6b6b6;
}

.list-inline {
  margin: 0;
}
.list-inline li {
  padding: 0;
}

.card-wrapper {
  position: relative;
  width: 100%;
  height: 390px;
  border: 1px solid #e5e5e5;
  border-bottom-width: 2px;
  overflow: hidden;
  margin-bottom: 30px;
}
.card-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-wrapper:hover:after {
  opacity: 1;
}
.card-wrapper:hover .image-holder:before {
  opacity: .75;
}
.card-wrapper:hover .image-holder:after {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.card-wrapper:hover .image-holder--original {
  transform: translateY(-15px);
}
.card-wrapper:hover .product-description {
  height: 205px;
}
@media (min-width: 768px) {
  .card-wrapper:hover .product-description {
    height: 185px;
  }
}

.image-holder {
  display: block;
  position: relative;
  width: 100%;
  height: 310px;
  background-color: #ffffff;
  z-index: 1;
}
@media (min-width: 768px) {
  .image-holder {
    height: 325px;
  }
}
.image-holder:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4CAF50;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.6s;
}
.image-holder:after {
  content: '+';
  font-family: 'Raleway', sans-serif;
  font-size: 70px;
  color: #4CAF50;
  text-align: center;
  position: absolute;
  top: 92.5px;
  left: 50%;
  width: 75px;
  height: 75px;
  line-height: 75px;
  background-color: #ffffff;
  opacity: 0;
  border-radius: 50%;
  z-index: 10;
  transform: translate(-50%, 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-out;
}
@media (min-width: 768px) {
  .image-holder:after {
    top: 107.5px;
  }
}
.image-holder .image-holder__link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
}
.image-holder .image-holder--original {
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.image-liquid {
  width: 100%;
  height: 325px;
  background-size: cover;
  background-position: center center;
}

.product-description {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80px;
  padding: 10px 15px;
  overflow: hidden;
  background-color: #fafafa;
  border-top: 1px solid #e5e5e5;
  transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 2;
}
@media (min-width: 768px) {
  .product-description {
    height: 65px;
  }
}
.product-description p {
  margin: 0 0 5px;
}
.product-description .product-description__title {
  font-family: 'Raleway', sans-serif;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}
.product-description .product-description__title:after {
  content: '';
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa);
}
.product-description .product-description__title a {
  text-decoration: none;
  color: inherit;
}
.product-description .product-description__category {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-description .product-description__price {
  color: #4CAF50;
  text-align: left;
  font-weight: bold;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  .product-description .product-description__price {
    text-align: right;
  }
}
.product-description .sizes-wrapper {
  margin-bottom: 15px;
}
.product-description .color-list {
  font-size: 0;
}
.product-description .color-list__item {
  width: 25px;
  height: 10px;
  position: relative;
  z-index: 1;
  transition: all .2s;
}
.product-description .color-list__item:hover {
  width: 40px;
}
.product-description .color-list__item--red {
  background-color: #F44336;
}
.product-description .color-list__item--blue {
  background-color: #448AFF;
}
.product-description .color-list__item--green {
  background-color: #CDDC39;
}
.product-description .color-list__item--orange {
  background-color: #FF9800;
}
.product-description .color-list__item--purple {
  background-color: #673AB7;
}
</style></head><body>
<!--
Inspired in this dribbble
https://dribbble.com/shots/986548-Product-Catalog
-->

<div class="container">
	<div class="row">

		<div class="col-xs-12 col-sm-6 col-md-4">
			<article class="card-wrapper">
				<div class="image-holder">
					<a href="#" class="image-holder__link"></a>
					<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg')">
					</div>
				</div>

				<div class="product-description">
					<!-- title -->
					<h1 class="product-description__title">
						<a href="#">						
							Adidas Originals
							</a>
					</h1>

					<!-- category and price -->
					<div class="row">
						<div class="col-xs-12 col-sm-8 product-description__category secondary-text">
							Men's running shirt
						</div>
						<div class="col-xs-12 col-sm-4 product-description__price">
							€ 499
						</div>
					</div>

					<!-- divider -->
					<hr />

					<!-- sizes -->
					<div class="sizes-wrapper">
						<b>Sizes</b>
						<br />
						<span class="secondary-text text-uppercase">
							<ul class="list-inline">
								<li>xs,</li>								
								<li>s,</li>								
								<li>sm,</li>								
								<li>m,</li>
								<li>l,</li>								
								<li>xl,</li>								
								<li>xxl</li>								
							</ul>
						</span>
					</div>

					<!-- colors -->
					<div class="color-wrapper">
						<b>Colors</b>
						<br />
						<ul class="list-inline color-list">
							<li class="color-list__item color-list__item--red"></li>
							<li class="color-list__item color-list__item--blue"></li>
							<li class="color-list__item color-list__item--green"></li>
							<li class="color-list__item color-list__item--orange"></li>
							<li class="color-list__item color-list__item--purple"></li>
						</ul>
					</div>
				</div>

			</article>
		</div>
		
		<div class="col-xs-12 col-sm-6 col-md-4">
			<article class="card-wrapper">
				<div class="image-holder">
					<a href="#" class="image-holder__link"></a>
					<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Jeans_BW_2_(3213391837).jpg/543px-Jeans_BW_2_(3213391837).jpg')">
					</div>
				</div>

				<div class="product-description">
					<!-- title -->
					<h1 class="product-description__title">
						<a href="#">						
							Adidas Originals
							</a>
					</h1>

					<!-- category and price -->
					<div class="row">
						<div class="col-sm-8 product-description__category secondary-text">
							Men's running shirt
						</div>
						<div class="col-sm-4 product-description__price text-right">
							€ 499
						</div>
					</div>

					<!-- divider -->
					<hr />

					<!-- sizes -->
					<div class="sizes-wrapper">
						<b>Sizes</b>
						<br />
						<span class="secondary-text text-uppercase">
							<ul class="list-inline">
								<li>xs,</li>								
								<li>s,</li>								
								<li>sm,</li>								
								<li>m,</li>
								<li>l,</li>								
								<li>xl,</li>								
								<li>xxl</li>								
							</ul>
						</span>
					</div>

					<!-- colors -->
					<div class="color-wrapper">
						<b>Colors</b>
						<br />
						<ul class="list-inline color-list">
							<li class="color-list__item color-list__item--red"></li>
							<li class="color-list__item color-list__item--blue"></li>
							<li class="color-list__item color-list__item--green"></li>
							<li class="color-list__item color-list__item--orange"></li>
							<li class="color-list__item color-list__item--purple"></li>
						</ul>
					</div>
				</div>

			</article>
		</div>
		
		<div class="col-xs-12 col-sm-6 col-md-4">
			<article class="card-wrapper">
				<div class="image-holder">
					<a href="#" class="image-holder__link"></a>
					<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/Columbia_Sportswear_Jacket.jpg')">
					</div>
				</div>

				<div class="product-description">
					<!-- title -->
					<h1 class="product-description__title">
						<a href="#">						
							Adidas Originals
							</a>
					</h1>

					<!-- category and price -->
					<div class="row">
						<div class="col-sm-8 product-description__category secondary-text">
							Men's running shirt
						</div>
						<div class="col-sm-4 product-description__price text-right">
							€ 499
						</div>
					</div>

					<!-- divider -->
					<hr />

					<!-- sizes -->
					<div class="sizes-wrapper">
						<b>Sizes</b>
						<br />
						<span class="secondary-text text-uppercase">
							<ul class="list-inline">
								<li>xs,</li>								
								<li>s,</li>								
								<li>sm,</li>								
								<li>m,</li>
								<li>l,</li>								
								<li>xl,</li>								
								<li>xxl</li>								
							</ul>
						</span>
					</div>

					<!-- colors -->
					<div class="color-wrapper">
						<b>Colors</b>
						<br />
						<ul class="list-inline color-list">
							<li class="color-list__item color-list__item--red"></li>
							<li class="color-list__item color-list__item--blue"></li>
							<li class="color-list__item color-list__item--green"></li>
							<li class="color-list__item color-list__item--orange"></li>
							<li class="color-list__item color-list__item--purple"></li>
						</ul>
					</div>
				</div>

			</article>
		</div>
		
		<div class="col-xs-12 col-sm-6 col-md-4">
			<article class="card-wrapper">
				<div class="image-holder">
					<a href="#" class="image-holder__link"></a>
					<div class="image-liquid image-holder--original" style="background-image: url('http://www.publicdomainpictures.net/pictures/20000/nahled/red-shoes-isolated.jpg')">
					</div>
				</div>

				<div class="product-description">
					<!-- title -->
					<h1 class="product-description__title">
						<a href="#">						
							Adidas Originals
							</a>
					</h1>

					<!-- category and price -->
					<div class="row">
						<div class="col-sm-8 product-description__category secondary-text">
							Men's running shirt
						</div>
						<div class="col-sm-4 product-description__price text-right">
							€ 499
						</div>
					</div>

					<!-- divider -->
					<hr />

					<!-- sizes -->
					<div class="sizes-wrapper">
						<b>Sizes</b>
						<br />
						<span class="secondary-text text-uppercase">
							<ul class="list-inline">
								<li>xs,</li>								
								<li>s,</li>								
								<li>sm,</li>								
								<li>m,</li>
								<li>l,</li>								
								<li>xl,</li>								
								<li>xxl</li>								
							</ul>
						</span>
					</div>

					<!-- colors -->
					<div class="color-wrapper">
						<b>Colors</b>
						<br />
						<ul class="list-inline color-list">
							<li class="color-list__item color-list__item--red"></li>
							<li class="color-list__item color-list__item--blue"></li>
							<li class="color-list__item color-list__item--green"></li>
							<li class="color-list__item color-list__item--orange"></li>
							<li class="color-list__item color-list__item--purple"></li>
						</ul>
					</div>
				</div>

			</article>
		</div>

	</div>
</div>

</body></html>

The sample is made

Solution 9 - Html

<html>
<head>
<style>
.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}
</style>
</head>
<body>

<h2>Display an Element on Hover</h2>

<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>

</body>
</html>

Content Type	Original Author	Original Content on Stackoverflow
Question	Will Ryan	View Question on Stackoverflow
Solution 1 - Html	João Paulo Macedo	View Answer on Stackoverflow
Solution 2 - Html	mrpopo	View Answer on Stackoverflow
Solution 3 - Html	Sathish M	View Answer on Stackoverflow
Solution 4 - Html	aditya	View Answer on Stackoverflow
Solution 5 - Html	Muddasir Abbas	View Answer on Stackoverflow
Solution 6 - Html	Gcamara14	View Answer on Stackoverflow
Solution 7 - Html	Hamid Hemani	View Answer on Stackoverflow
Solution 8 - Html	mirazimi	View Answer on Stackoverflow
Solution 9 - Html	Franck da COSTA	View Answer on Stackoverflow