이미지 특정위치 투명도 조절, 이미지 위에 글자 넣기

이미지 특정위치 투명도 조절, 이미지 위에 글자 넣기

이미지의 특정 위치를 투명하게 하고 글자넣는 방법을

 

 

방법은 이미 만들어져 있는 jquery를 이용하기 때문에 간단하지만..

css 스타일과 함께 사용해야 합니다.

먼저 다음의 이미지 슬라이드를 보시기 바랍니다.

 

 

위와 같이 하기 위한 방법은 다음과 같습니다.

 

 

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

 

 

HTML 소스입니다.

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    >
    <!-- empty element for overlay -->
    <div class="cycle-overlay"></div>

    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/2.jpg" 
        data-cycle-title="이미지 타이틀 1" 
        data-cycle-desc="이미지설명 1">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/4.jpg" 
        data-cycle-title="이미지 타이틀 2" 
        data-cycle-desc="이미지설명 2">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg" 
        data-cycle-title="이미지 타이틀 3" 
        data-cycle-desc="이미지설명 3">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/8.jpg" 
        data-cycle-title="이미지 타이틀 4" 
        data-cycle-desc="이미지설명 4">
</div>

 

 

그 다음으로 style sheet를 적용해야 정상적으로 보입니다.

css는 다음과 같습니다.

 

<STYLE>
<!--
/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 

.cycle-slideshow { width: 500px; min-width: 200px; max-width: 500px; margin: 10px auto; padding: 0; position: relative; }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img {
    /*
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* overlay */
.cycle-overlay {
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}

//-->
</STYLE> 

 

 

이렇게 멋진 jquery를 만들어줘서 정말 편하게 사용할 수 있네요!

 

참고사이트. http://jquery.malsup.com/cycle2/demo/overlay.php