마우스가 오버 되었을때 이미지 위에 글씨 바뀌게
본문
Warehousing & Shipping Dimensioners | Cubiscan Dimensioning Products
이런식으로 바뀌게 하고 싶은데 (롤오버 이미지로 말고..)
이렇게하려면 어떻게해야 하나요?
ㅁ
답변 2
1.CSS로 하는방법
<style>
.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;}
</style>
<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>
2.jquery로 하는방법
<style>
.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; }
</style>
<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>
<script>
$(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"}); }); });
</script>
입맛에 맛게 골라쓰세요
아 이런 방법이군요 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.