CSS

[CSS] Display Image On Text (a tag) Hover Only CSS

chsr 2023. 10. 11. 17:42
728x90
반응형

■ CSS Display Image On Text (a tag) Hover Only CSS 

<a> 태그 hover 시 이미지 미리보기 기능 css 로만 구현하기


HTML & CSS

<style>
    .image_hover a { position:relative; }
    .image_hover a span { position:absolute; display:none; z-index:9999; }
    .image_hover a:hover span { display:block; }
</style>

<div class='image_hover'>
    <a href='image_url' target="_blank">
        Show Image<span><img src='image_url' alt='image' width='100' /></span>
    </a>
</div>
728x90
반응형