마우스가 오버 되었을때 이미지 위에 글씨 바뀌게 채택완료
windday
2년 전
조회 1,896
https://cubiscan.com/dimensioning-products/">Warehousing & Shipping Dimensioners | Cubiscan Dimensioning Products
이런식으로 바뀌게 하고 싶은데 (롤오버 이미지로 말고..)
이렇게하려면 어떻게해야 하나요?
ㅁ
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
2년 전
1.CSS로 하는방법
</p>
<p><style></p>
<p>.image-container {position: relative;display: inline-block;}
.image-overlay {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);color: white;visibility: hidden;opacity: 0;transition: visibility 0s, opacity 0.5s ease;}
.image-container:hover .image-overlay {visibility: visible;opacity: 1;}</p>
<p></style></p>
<p><div class="image-container">
<img src="image.jpg" alt="Image">
<div class="image-overlay">
<p>Text1</p>
</div>
</div>
<div class="image-container">
<img src="image.jpg" alt="Image">
<div class="image-overlay">
<p>Text2</p>
</div>
</div></p>
<p>
2.jquery로 하는방법
</p>
<p><style></p>
<p>.image-container { position: relative; display: inline-block; } .image-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); color: white; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease; }</p>
<p></style></p>
<p><div class="image-container">
<img src="image.jpg" alt="Image">
<div class="image-overlay">
<p>Text1</p>
</div>
</div>
<div class="image-container">
<img src="image.jpg" alt="Image">
<div class="image-overlay">
<p>Text2</p>
</div>
</div></p>
<p><script></p>
<p>$(document).ready(function() { $(".image-container").hover(function() { $(this).find(".image-overlay").css({"visibility": "visible", "opacity": "1"}); }, function() { $(this).find(".image-overlay").css({"visibility": "hidden", "opacity": "0"}); }); });</p>
<p></script></p>
<p>
입맛에 맛게 골라쓰세요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인