Text over image jQuery

나는 그 위에 마우스를 놓을 때 에에 이미지를 표시하려고합니다. 몇 가지 방법을 시도했지만 아무도 작동하지 않거나 안정적으로 작동하지 않습니다. jQuery로 HTML 코드 작성 중입니다. 무엇을해야하는지 보여주세요! : D 당신이 jQuery를 함께이 일을하는 이유를 모르겠어요Text over image jQuery

$(document).ready(function() { 
 
    $('img').css('height', '150px'); 
 
    $('img').css('width', '150px'); 
 
    $('img').css('padding', '10px'); 
 
    $('img').css('border-radius', '30px'); 
 
    $('#container').css('width', '1040px'); 
 
    $('#container').css('margin-left', 'auto'); 
 
    $('#container').css('margin-right', 'auto'); 
 
}) 
 

 
$(document).ready(function() { 
 
    $('img').click(function() { 
 
    $('#container').append("<p>It worked chaps</p>"); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="gallery"> 
 
    <div id="container"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"> 
 
     <p>It worked</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2014-10-25 user3910313

에 그것을 시도? – sticksu

그것을 밖으로 시도 : JSFiddle

$("img").hover(function(){ 
    $(".hover").show().offset($(this).offset()); 
}, function(){ 
    $(".hover").hide(); 
});

를

이렇게하면 호버링 할 때 모든 이미지 위에 클래스 호버가있는 요소가 표시됩니다.

출처

2014-10-25 11:47:15

, 당신은 CSS와 함께 할 것이다.

기본 예제를 알려 드리겠습니다. HTML :

<div class="wrapper"> 
<img src="http://i4.mirror.co.uk/incoming/article2106793.ece/alternates/s2197/Fluffy-White-dog.jpg"/> 
<div class="text">Here is the text</div>

그리고 CSS :

img { 
    width: 300px; 
} 

.wrapper { 
    position: relative; 
} 

.text { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    display: none; 
} 

.wrapper:hover .text { 
    display: block; 
}

Jsfiddle : http://jsfiddle.net/c32jud6j/

출처

2014-10-25 11:44:28 sticksu

HTML :

<div class="imgWrap"> 
    <img src="http://www.corelangs.com/css/box/img/caption4.jpg" alt="polaroid" /> 
    <p class="imgDescription">This image looks super neat.</p> 
</div>

CSS : 사용 JQuery와 당신은 CSS를 사용할 수있을 때 왜 :

.imgWrap { 
    position: relative; 
} 

.imgDescription { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    color: #fff; 
    visibility: hidden; 
    opacity: 0; 
} 

.imgWrap:hover .imgDescription { 
    visibility: visible; 
    opacity: 1; 
}

가르치 려하시기 바랍니다 JSFiddle

출처

2014-10-25 11:49:32

Text over image jQuery

답변

관련 문제