How to show text on image when hovering

Question

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   x000D   x000D  div projectlist   x000D    width  770px  x000D    margin  0 auto  x000D    margin-top  20px  x000D    margin-bottom  40px  x000D    x000D   x000D  div buzzbutton   x000D    display  block  x000D    float  left  x000D    margin  2px  x000D    background  url content assets thumbnails design buzz sprite jpg  0 0px no-repeat  x000D    width  150px  x000D    height  150px  x000D    x000D   x000D  div buzzbutton hover   x000D    background  url content assets thumbnails design buzz sprite jpg   x000D    width  150px  x000D    height  150px  x000D    background-position  0 -150px  x000D    x000D   x000D  div slinksterbutton   x000D    display  block  x000D    float  left  x000D    background  url content assets thumbnails design slinkster sprite jpg  0 0px no-repeat  x000D    width  150px  x000D    height  150px  x000D    margin  2px  x000D    x000D   x000D  div slinksterbutton hover   x000D    background  url content assets thumbnails design slinkster sprite jpg   x000D    width  150px  x000D    height  150px  x000D    background-position  0 -150px  x000D    x000D   lt div id  projectlist  gt  x000D     lt div id  buzzbutton  gt  x000D       lt a href  buzz html  title    gt  lt img src  content assets thumbnails transparent 150x150 png  alt      gt  lt  a gt  x000D     lt  div gt  x000D   x000D     lt div id  slinksterbutton  gt  x000D       lt a href  slinkster html  title    gt  lt img src  content assets thumbnails transparent 150x150 png  alt      gt  lt  a gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

_x000D_

* {_x000D_
  box-sizing: border-box_x000D_
}_x000D_
_x000D_
div {_x000D_
  position: relative;_x000D_
  top: 0px;_x000D_
  left: 0px;_x000D_
  width: 400px;_x000D_
  height: 400px;_x000D_
  border-radius: 50%;_x000D_
  overflow: hidden;_x000D_
  text-align: center_x000D_
}_x000D_
_x000D_
img {_x000D_
  width: 400px;_x000D_
  height: 400px;_x000D_
  position: absolute;_x000D_
  border-radius: 50%_x000D_
}_x000D_
_x000D_
img:hover {_x000D_
  opacity: 0;_x000D_
  transition:opacity 2s;_x000D_
}_x000D_
_x000D_
heading {_x000D_
  line-height: 40px;_x000D_
  font-weight: bold;_x000D_
  font-family: "Trebuchet MS";_x000D_
  text-align: center;_x000D_
  position: absolute;_x000D_
  display: block_x000D_
}_x000D_
_x000D_
div p {_x000D_
  z-index: -1;_x000D_
  width: 420px;_x000D_
  line-height: 20px;_x000D_
  display: inline-block;_x000D_
  padding: 200px 0px;_x000D_
  vertical-align: middle;_x000D_
  font-family: "Trebuchet MS";_x000D_
  height: 450px_x000D_
}

_x000D_

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

_x000D_

User · Answer

You can also use the title attribute in your image tag   lt img src  content assets thumbnails transparent 150x150 png  alt    title  hover text    gt

User · Answer

HTML  lt img id  close  className  fa fa-close  src    alt    title  Close Me    gt   CSS  close title  hover after     color  red    content  attr title     position  absolute    left  50px

User · Answer

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    x000D   x000D     quick reset    x000D      x000D    margin  0  x000D    padding  0  x000D    border  0  x000D    x000D   x000D     relevant styles    x000D   img  wrap   x000D    position  relative  x000D    height  200px  x000D    width  257px  x000D    x000D   x000D   img  description   x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    background  rgba 29  106  154  0 72   x000D    color   fff  x000D    visibility  hidden  x000D    opacity  0  x000D   x000D       transition effect  not necessary    x000D    transition  opacity  2s  visibility  2s  x000D    x000D   x000D   img  wrap hover  img  description   x000D    visibility  visible  x000D    opacity  1  x000D    x000D   lt div class  img  wrap  gt  x000D     lt img class  img  img  src  http   placehold it 257x200 jpg    gt  x000D     lt p class  img  description  gt This image looks super neat  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    A nice fiddle  https   jsfiddle net govdqd8y

User · Answer

x000D   x000D   container   x000D    position  relative  x000D    width  50   x000D    x000D   x000D   image   x000D    display  block  x000D    width  100   x000D    height  auto  x000D    x000D   x000D   overlay   x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    height  100   x000D    width  100   x000D    opacity  0  x000D    transition   5s ease  x000D    background-color   008CBA  x000D    x000D   x000D   container hover  overlay   x000D    opacity  1  x000D    x000D   x000D   text   x000D    color  white  x000D    font-size  20px  x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50    x000D    -ms-transform  translate -50   -50    x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt  x000D     lt img src  http   lorempixel com 500 500   alt  Avatar  class  image  gt  x000D     lt div class  overlay  gt  x000D       lt div class  text  gt Hello World lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Reference Link W3schools with multiple styles

User · Answer

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    x000D   x000D   overlay-box   x000D    background-color   f5f5f5  x000D    height  100   x000D    background-repeat  no-repeat  x000D    background-size  cover  x000D    x000D   x000D   overlay-box hover  desc  x000D   overlay-box focus  desc   x000D    opacity  1  x000D    x000D   x000D     opacity 0 01 for accessibility    x000D     adjust the styles like height padding to match your design   x000D   overlay-box  desc   x000D    opacity  0 01  x000D    min-height  355px  x000D    font-size  1rem  x000D    height  100   x000D    padding  30px 25px 20px  x000D    transition  all 0 3s ease  x000D    background  rgba 0  0  0  0 7   x000D    color   fff  x000D    x000D   lt div class  overlay-box  style  background-image  url  https   via placeholder com 768x768     gt  x000D     lt div class  desc  gt  x000D       lt p gt Place your text here lt  p gt  x000D       lt ul gt  x000D         lt li gt lorem ipsum dolor lt  li gt  x000D         lt li gt lorem lipsum lt  li gt  x000D         lt li gt lorem lt  li gt  x000D       lt  ul gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In your HTML  try and put the text that you want to come up in the title part of the code    lt a  href  buzz html  title  buzz hover text  gt    You can also do the same for the alt text of your image

User · Answer

lt  DOCTYPE html gt  lt html lang  en  class    gt   lt head gt  lt script src    production-assets codepen io assets editor live console runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd js  gt  lt  script gt  lt script src    production-assets codepen io assets editor live events runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd js  gt  lt  script gt  lt script src    production-assets codepen io assets editor live css live reload init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77 js  gt  lt  script gt  lt meta charset  UTF-8  gt  lt meta name  robots  content  noindex  gt  lt link rel  shortcut icon  type  image x-icon  href    production-assets codepen io assets favicon favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164 ico    gt  lt link rel  mask-icon  type    href    production-assets codepen io assets favicon logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6 svg  color   111    gt  lt link rel  canonical  href  https   codepen io nelsonleite pen RaGwba depth everything amp order popularity amp page 4 amp q product amp show forks false    gt   lt link href  https   fonts googleapis com css family Raleway  rel  stylesheet  type  text css  gt   lt link rel  stylesheet prefetch  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt   lt style class  cp-pen-styles  gt  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     lt  style gt  lt  head gt  lt body gt   lt  -- Inspired in this dribbble https   dribbble com shots 986548-Product-Catalog -- gt    lt div class  container  gt       lt div class  row  gt            lt div class  col-xs-12 col-sm-6 col-md-4  gt               lt article class  card-wrapper  gt                   lt div class  image-holder  gt                       lt a href     class  image-holder  link  gt  lt  a gt                       lt div class  image-liquid image-holder--original  style  background-image  url  https   upload wikimedia org wikipedia commons 2 24 Blue Tshirt jpg    gt                       lt  div gt                   lt  div gt                    lt div class  product-description  gt                       lt  -- title -- gt                       lt h1 class  product-description  title  gt                           lt a href     gt                                                      Adidas Originals                              lt  a gt                       lt  h1 gt                        lt  -- category and price -- gt                       lt div class  row  gt                           lt div class  col-xs-12 col-sm-8 product-description  category secondary-text  gt                              Men s running shirt                          lt  div gt                           lt div class  col-xs-12 col-sm-4 product-description  price  gt                                  499                          lt  div gt                       lt  div gt                        lt  -- divider -- gt                       lt hr   gt                        lt  -- sizes -- gt                       lt div class  sizes-wrapper  gt                           lt b gt Sizes lt  b gt                           lt br   gt                           lt span class  secondary-text text-uppercase  gt                               lt ul class  list-inline  gt                                   lt li gt xs  lt  li gt                                                                   lt li gt s  lt  li gt                                                                lt li gt sm  lt  li gt                                                                   lt li gt m  lt  li gt                                   lt li gt l  lt  li gt                                                                lt li gt xl  lt  li gt                                                                   lt li gt xxl lt  li gt                                                               lt  ul gt                           lt  span gt                       lt  div gt                        lt  -- colors -- gt                       lt div class  color-wrapper  gt                           lt b gt Colors lt  b gt                           lt br   gt                           lt ul class  list-inline color-list  gt                               lt li class  color-list  item color-list  item--red  gt  lt  li gt                               lt li class  color-list  item color-list  item--blue  gt  lt  li gt                               lt li class  color-list  item color-list  item--green  gt  lt  li gt                               lt li class  color-list  item color-list  item--orange  gt  lt  li gt                               lt li class  color-list  item color-list  item--purple  gt  lt  li gt                           lt  ul gt                       lt  div gt                   lt  div gt                lt  article gt           lt  div gt            lt div class  col-xs-12 col-sm-6 col-md-4  gt               lt article class  card-wrapper  gt                   lt div class  image-holder  gt                       lt a href     class  image-holder  link  gt  lt  a gt                       lt 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    gt                       lt  div gt                   lt  div gt                    lt div class  product-description  gt                       lt  -- title -- gt                       lt h1 class  product-description  title  gt                           lt a href     gt                                                      Adidas Originals                              lt  a gt                       lt  h1 gt                        lt  -- category and price -- gt                       lt div class  row  gt                           lt div class  col-sm-8 product-description  category secondary-text  gt                              Men s running shirt                          lt  div gt                           lt div class  col-sm-4 product-description  price text-right  gt                                  499                          lt  div gt                       lt  div gt                        lt  -- divider -- gt                       lt hr   gt                        lt  -- sizes -- gt                       lt div class  sizes-wrapper  gt                           lt b gt Sizes lt  b gt                           lt br   gt                           lt span class  secondary-text text-uppercase  gt                               lt ul class  list-inline  gt                                   lt li gt xs  lt  li gt                                                                   lt li gt s  lt  li gt                                                                lt li gt sm  lt  li gt                                                                   lt li gt m  lt  li gt                                   lt li gt l  lt  li gt                                                                lt li gt xl  lt  li gt                                                                   lt li gt xxl lt  li gt                                                               lt  ul gt                           lt  span gt                       lt  div gt                        lt  -- colors -- gt                       lt div class  color-wrapper  gt                           lt b gt Colors lt  b gt                           lt br   gt                           lt ul class  list-inline color-list  gt                               lt li class  color-list  item color-list  item--red  gt  lt  li gt                               lt li class  color-list  item color-list  item--blue  gt  lt  li gt                               lt li class  color-list  item color-list  item--green  gt  lt  li gt                               lt li class  color-list  item color-list  item--orange  gt  lt  li gt                               lt li class  color-list  item color-list  item--purple  gt  lt  li gt                           lt  ul gt                       lt  div gt                   lt  div gt                lt  article gt           lt  div gt            lt div class  col-xs-12 col-sm-6 col-md-4  gt               lt article class  card-wrapper  gt                   lt div class  image-holder  gt                       lt a href     class  image-holder  link  gt  lt  a gt                       lt div class  image-liquid image-holder--original  style  background-image  url  https   upload wikimedia org wikipedia commons b b8 Columbia Sportswear Jacket jpg    gt                       lt  div gt                   lt  div gt                    lt div class  product-description  gt                       lt  -- title -- gt                       lt h1 class  product-description  title  gt                           lt a href     gt                                                      Adidas Originals                              lt  a gt                       lt  h1 gt                        lt  -- category and price -- gt                       lt div class  row  gt                           lt div class  col-sm-8 product-description  category secondary-text  gt                              Men s running shirt                          lt  div gt                           lt div class  col-sm-4 product-description  price text-right  gt                                  499                          lt  div gt                       lt  div gt                        lt  -- divider -- gt                       lt hr   gt                        lt  -- sizes -- gt                       lt div class  sizes-wrapper  gt                           lt b gt Sizes lt  b gt                           lt br   gt                           lt span class  secondary-text text-uppercase  gt                               lt ul class  list-inline  gt                                   lt li gt xs  lt  li gt                                                                   lt li gt s  lt  li gt                                                                lt li gt sm  lt  li gt                                                                   lt li gt m  lt  li gt                                   lt li gt l  lt  li gt                                                                lt li gt xl  lt  li gt                                                                   lt li gt xxl lt  li gt                                                               lt  ul gt                           lt  span gt                       lt  div gt                        lt  -- colors -- gt                       lt div class  color-wrapper  gt                           lt b gt Colors lt  b gt                           lt br   gt                           lt ul class  list-inline color-list  gt                               lt li class  color-list  item color-list  item--red  gt  lt  li gt                               lt li class  color-list  item color-list  item--blue  gt  lt  li gt                               lt li class  color-list  item color-list  item--green  gt  lt  li gt                               lt li class  color-list  item color-list  item--orange  gt  lt  li gt                               lt li class  color-list  item color-list  item--purple  gt  lt  li gt                           lt  ul gt                       lt  div gt                   lt  div gt                lt  article gt           lt  div gt            lt div class  col-xs-12 col-sm-6 col-md-4  gt               lt article class  card-wrapper  gt                   lt div class  image-holder  gt                       lt a href     class  image-holder  link  gt  lt  a gt                       lt div class  image-liquid image-holder--original  style  background-image  url  http   www publicdomainpictures net pictures 20000 nahled red-shoes-isolated jpg    gt                       lt  div gt                   lt  div gt                    lt div class  product-description  gt                       lt  -- title -- gt                       lt h1 class  product-description  title  gt                           lt a href     gt                                                      Adidas Originals                              lt  a gt                       lt  h1 gt                        lt  -- category and price -- gt                       lt div class  row  gt                           lt div class  col-sm-8 product-description  category secondary-text  gt                              Men s running shirt                          lt  div gt                           lt div class  col-sm-4 product-description  price text-right  gt                                  499                          lt  div gt                       lt  div gt                        lt  -- divider -- gt                       lt hr   gt                        lt  -- sizes -- gt                       lt div class  sizes-wrapper  gt                           lt b gt Sizes lt  b gt                           lt br   gt                           lt span class  secondary-text text-uppercase  gt                               lt ul class  list-inline  gt                                   lt li gt xs  lt  li gt                                                                   lt li gt s  lt  li gt                                                                lt li gt sm  lt  li gt                                                                   lt li gt m  lt  li gt                                   lt li gt l  lt  li gt                                                                lt li gt xl  lt  li gt                                                                   lt li gt xxl lt  li gt                                                               lt  ul gt                           lt  span gt                       lt  div gt                        lt  -- colors -- gt                       lt div class  color-wrapper  gt                           lt b gt Colors lt  b gt                           lt br   gt                           lt ul class  list-inline color-list  gt                               lt li class  color-list  item color-list  item--red  gt  lt  li gt                               lt li class  color-list  item color-list  item--blue  gt  lt  li gt                               lt li class  color-list  item color-list  item--green  gt  lt  li gt                               lt li class  color-list  item color-list  item--orange  gt  lt  li gt                               lt li class  color-list  item color-list  item--purple  gt  lt  li gt                           lt  ul gt                       lt  div gt                   lt  div gt                lt  article gt           lt  div gt        lt  div gt   lt  div gt    lt  body gt  lt  html gt    The sample is made

[html] How to show text on image when hovering?

Examples related to html

Examples related to css

Examples related to hover