호버 안에 제목 태그 표시 img

Question

안녕하세요 img 내부에 img의 제목 태그가 필요합니다. 이 예 http://jsfiddle.net/51csqs0b/

.image { 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.image img { 
 
    width:100%; 
 
    vertical-align:top; 
 
} 
 
.image:after, .image:before { 
 
    position:absolute; 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 
.image:after { 
 
    content:'\A'; 
 
    width:100%; height:100%; 
 
    top:0; left:0; 
 
    background:rgba(0,0,0,0.6); 
 
} 
 
.image:before { 
 
    content: attr(data-content); 
 
    width:100%; 
 
    color:#fff; 
 
    z-index:1; 
 
    bottom:0; 
 
    padding:4px 10px; 
 
    text-align:center; 
 
    background:red; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
} 
 
.image:hover:after, .image:hover:before { 
 
    opacity:1; 
 
}

<div data-content="Here is a caption" class="image"> 
 
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> 
 
</div> 
 

 
<hr> 
 
    
 
<div data-content="Different caption here..." class="image"> 
 
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> 
 
</div>

하지만 IMG 전에 사업부를 사용하지 않으처럼

.

<a href="#"><img class="" title="TITLE NEED SHOW ON HOVER" src=""/></a> 

표시 할 수 있습니까?

이 .image 클래스

<a class="image" href="#"><img src="http://i.stack.imgur.com/Sjsbh.jpg" class="" title="TITLE NEED SHOW ON HOVER" src=""/></a> 

a하려면 CSS에서 title와 data-content 교체 추가 : 감사

Answer 1

이것은 내가 할 수있는 일이 마지막으로

.image:before { 
    content: attr(title); 
    width:100%; 
    color:#fff; 
    z-index:1; 
    bottom:0; 
    padding:4px 10px; 
    text-align:center; 
    background:red; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 

이 jQuery 코드를 추가 :

$("a.image").each(function(){$(this).attr('title',$(this).find("img").attr('title'))}); 

실행 스스로 here 다음은

Answer 2

는 쉬운 방법입니다. 마우스를 올리면 pseudoelement를 사용합니다. Pure CSS solution

<a href="" class="img"></a> 

.img{ 
    display: block; 
    width:200px; 
    height:200px; 
    background: url('http://i.stack.imgur.com/Sjsbh.jpg'); 
    background-size: 200px 200px; 
    position: relative; 
} 
.img:hover::after { 
    content:'This is a description'; 
    position: absolute; 
    width:100%; 
    height:20%; 
    bottom:0; left:0; 
    background: rgba(255, 255, 255, 0.8); 
} 

당신은 매우 구체적인하지 않습니다. 나는 그것이 도움이되기를 바랍니다. 툴팁을 만들 수도 있습니다.