마우스가 오버 되었을때 이미지 위에 글씨 바뀌게

마우스가 오버 되었을때 이미지 위에 글씨 바뀌게

QA

마우스가 오버 되었을때 이미지 위에 글씨 바뀌게

본문

3717667443_1679464543.3977.jpg

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>

 

입맛에 맛게 골라쓰세요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT