• 회원가입
  • 로그인
  • 구글아이디로 로그인

[image] CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)

이미지 모달 효과

 

<style>

#basicImg {

  border-radius: 5px;

  cursor: pointer;

  transition: 0.3s;

  width:100%;

  max-width:300px

}


#basicImg:hover {opacity: 0.7;}


/* 모달 (배경) */

.modalBox {

  display: none;

  position: fixed;

  z-index: 1;

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgb(0,0,0); /* 예비색 */

  background-color: rgba(0,0,0,0.9); /* 기본색 */

}


/* 모달 내용(이미지) */

.modalImg {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

}


/* 모달 이미지의 캡션 */

#caption {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

  text-align: center;

  color: #ccc;

  padding: 10px 0;

  height: 150px;

}


/* 애니메이션 효과 */

.modalImg, #caption {  

  -webkit-animation-name: zoom;

  -webkit-animation-duration: 0.6s;

  animation-name: zoom;

  animation-duration: 0.6s;

}


@-webkit-keyframes zoom {

  from {-webkit-transform:scale(0)} 

  to {-webkit-transform:scale(1)}

}


@keyframes zoom {

  from {transform:scale(0)} 

  to {transform:scale(1)}

}


/* 모달 닫기 버튼 */

.closeBtn {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #f1f1f1;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}


.closeBtn:hover,

.closeBtn:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}


/* 작은 기기 경우, 이미지 너비 100% 설정 */

@media only screen and (max-width: 700px){

  .modalImg {

    width: 100%;

  }

}

</style>


<img id="basicImg" src="https://source.unsplash.com/random" alt="랜덤이미지">


<!-- 모달 박스 -->

<div id="modalBox" class="modalBox">

  <span class="closeBtn">&times;</span>

  <img class="modalImg" id="modalImg">

  <div id="caption"></div>

</div>


<script>

// 요소 얻기

var modalBox = document.getElementById("modalBox");

var basicImg = document.getElementById("basicImg");

var modalImg = document.getElementById("modalImg");

var caption = document.getElementById("caption");


// 이미지를 모달에 넣기 (alt 텍스트를 캡션으로 사용)

basicImg.onclick = function(){

  modalBox.style.display = "block";

  modalImg.src = this.src;

  caption.innerHTML = this.alt;

}


// 모달 닫기 버튼

var closeBtn = document.getElementsByClassName("closeBtn")[0];


// 모달 닫기 버튼 클릭 시, 모달 닫기

closeBtn.onclick = function() { 

  modalBox.style.display = "none";

}


// 모달 클릭 시, 모달 닫기

modalBox.onclick = function() { 

  modalBox.style.display = "none";

}

</script>

 

결과보기

PS. 모달 (Modal) : 이목 집중 위한 팝업처럼 띄우는 화면전환 효과

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
image CSS - filter 속성 - 이미지필터효과 (= filter속성 = 필터속성) ※ 흑백이미지만들기 ※ 이…
image CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= obje…
image CSS - object-position 속성 - <img>/<video>가 "자체 콘텐츠 상자" 내부의 x/…
image CSS - image-rendering 속성 - 크기 조정 가능 이미지의 렌더링 방식 지정 (= image-…
목록
찾아주셔서 감사합니다. Since 2012