Q: if I have my mouse over the image it show text How can I style title of image so it show title like this: http://s28.postimg.org/qd6ic020d/hover.png
Thank for every answer

A: These are known as tooltips. 
You can lookup a lot of plugins for these kind of things. 
e.g. 


*

*http://foundation.zurb.com/docs/components/tooltips.html

*http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

*and many many more!


Google is your friend here.
Many require JS, but it is possible to do it only through CSS:
e.g.


*

*http://www.menucool.com/tooltip/css-tooltip

*http://www.cssportal.com/css-tooltip-generator/

*and many many more


A: You can try this 
HTML
<a href="#" title="Hello world!">Hello</a>

CSS
a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}


A: You can use popover from bootstrap
Here is how


$(document).ready(function() {



  $('[data-toggle="popover"]').popover({
    trigger: "hover"
  });


});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">hover here. Toggle popover</a>
</div>


Update: You can position popover upon hover like this
   //Top
   <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>

   //bottom
   <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

   //left
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a> 

  //right
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>

