Text on image mouseover

Question

I am trying to get a small box to appear on the bottom-left side of an image when a mouse moves over it  Inside the box there will be a link to a different page   Here is somewhat similar to what I want  but the box to be smaller and not connected to the border of the image   I ve tried everything and can t find an answer  And I don t want to use tooltip  let alone the fact that i have no javascript knowledge whatsoever  I really want this to be CSS   Also the images I m trying to work with can be found right here

User · Answer

And if you come from even further in the future you can use the title property on div tags now to provide tooltips:

<div title="Tooltip text">Hover over me</div>

Let's just hope you're not using a browser from the past.

_x000D_

<div title="Tooltip text">Hover over me</div>

_x000D_

User · Answer

This is using the  hover pseudoelement in CSS3   HTML    lt div id  wrapper  gt       lt img src  http   placehold it 300x200  class  hover    gt       lt p class  text  gt text lt  p gt   lt  div gt     CSS    wrapper  text   position relative  bottom 30px  left 0px  visibility hidden      wrapper hover  text   visibility visible       Demo HERE     This instead is a way of achieving the same result by using jquery   HTML    lt div id  wrapper  gt       lt img src  http   placehold it 300x200  class  hover    gt       lt p class  text  gt text lt  p gt   lt  div gt     CSS    wrapper p   position relative  bottom 30px  left 0px  visibility hidden      jquery code       hover   mouseover function           text   css  visibility   visible             hover   mouseout function           text   css  visibility   hidden          You can put the jquery code where you want  in the body of the HTML page  then you need to include the jquery library in the head like this    lt head gt   lt script src    ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt   lt  head gt    You can see the demo HERE   When you want to use it on your website  just change the  lt img src   gt  value and you can add multiple images and captions  just copy the format i used  insert image with class  hover  and p with class  text

User · Answer

Here is one way to do this using css  HTML   lt div class  imageWrapper  gt       lt img src  http   lorempixel com 300 300   alt      gt       lt a href  http   google com  class  cornerLink  gt Link lt  a gt   lt  div gt     CSS   imageWrapper       position  relative      width  300px      height  300px     imageWrapper img       display  block     imageWrapper  cornerLink       opacity  0      position  absolute      bottom  0px      left  0px      right  0px      padding  2px 0px      color   ffffff      background   000000      text-decoration  none      text-align  center      -webkit-transition  opacity 500ms      -moz-transition  opacity 500ms      -o-transition  opacity 500ms      transition  opacity 500ms      imageWrapper hover  cornerLink       opacity  0 8      Demo  Or if you just want it in the bottom left corner   Demo

User · Answer

For people coming from the future  you can now do this purely in CSS   x000D   x000D   tooltip     position  relative    display  inline-block    border-bottom  1px dotted black     margin  5rem        Tooltip text     tooltip  tooltiptext     visibility  hidden    background-color  black    color   fff    text-align  center    padding  5px 0    border-radius  6px     width  120px    bottom  100     left  50     margin-left  -60px     position  absolute    z-index  1        Show the tooltip text when you mouse over the tooltip container     tooltip hover  tooltiptext     visibility  visible    x000D   lt div class  tooltip  gt Hover over me    lt span class  tooltiptext  gt Tooltip text lt  span gt   lt  div gt  x000D   x000D   x000D

[css] Text on image mouseover?

Examples related to css

Examples related to image

Examples related to text

Examples related to mouseover