<a href=""> <img src="images/ft_l3.png" alt=""> <div class="ewm"> <img src="http://www.vztimes.com/static/default/images/ewm.jpg"> </div> </a>
css
.ewm { width: 120px; padding: 5px; border-radius: 5px; background-color: #fff; border: 1px solid #ccc; position: absolute; bottom: 52px; left: 50%; margin-left: -60px; opacity: 0; visibility: hidden; transform: translateY(-10px); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } .ewm:before { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 8px solid #fff; content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -10px; } a:hover .ewm { opacity: 1; visibility: inherit; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); }