w3.css 이미지 오버레이 아이콘 마우스 오버 시 이미지 오버레이 아이콘 효과를 만드는 방법을 알아보자. 오버레이 이미지 아이콘을 만드는 방법 1단계) HTML 추가 <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <a href=”#” class=”icon” title=”User Profile”> <i class=”fa fa-user”></i> </a> </div> </div> 2단계) CSS 추가 /* Container needed to position the overlay. Adjust the width as needed */ .container { position: relative; width: 100%; max-width: 400px; } /* Make the image to responsive…

w3.css 이미지 오버레이 제목 마우스를 올리면 이미지 오버레이 제목을 만드는 방법을 알아보자. 오버레이 이미지 제목을 만드는 방법 1단계) HTML 추가 <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”>My Name is John</div> </div> 2단계) CSS 추가 * {box-sizing: border-box} /* Container needed to position the overlay. Adjust the width as needed */ .container { position: relative; width: 50%; max-width: 300px; } /* Make the image to responsive */ .image { display: block; width: 100%; height: auto; } /* The overlay effect…

w3.css 이미지 오버레이 줌 마우스 오버 시 이미지 오버레이 확대/축소 효과를 만드는 방법을 알아보자. 오버레이 확대/축소 효과를 만드는 방법 1단계) HTML 추가 <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <div class=”text”>Hello World</div> </div> </div> 2단계) CSS 추가 /* Container needed to position the overlay. Adjust the width as needed */ .container { position: relative; width: 50%; } /* Make the image to responsive */ .image { width: 100%; height: auto; } /* The overlay effect (full height and width)…

w3.css 이미지 오버레이 슬라이드 마우스를 올리면 이미지에 슬라이딩 오버레이 효과를 만드는 방법을 알아보자. 슬라이드 인(상단) 만들기 1단계) HTML 추가 <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <div class=”text”>Hello World</div> </div> </div> 2단계) CSS 추가 .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height:0; transition: .5s ease; } .container:hover .overlay { bottom: 0; height: 100%; }…

w3.css 이미지 호버 오버레이 마우스를 올리면 이미지에 페이딩 오버레이 효과를 만드는 방법을 알아보자. 텍스트 페이드 인 만들기 1단계) HTML 추가 <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <div class=”text”>Hello World</div> </div> </div> 2단계) CSS 추가 .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity:…

w3.css 탭 갤러리 CSS 및 JavaScript를 사용하여 탭 이미지 갤러리를 만드는 방법을 알아보자. 탭 갤러리 만들기 1단계) HTML 추가 <!– The grid: four columns –> <div class=”row”> <div class=”column”> <img src=”img_nature.jpg” alt=”Nature” onclick=”myFunction(this);”> </div> <div class=”column”> <img src=”img_snow.jpg” alt=”Snow” onclick=”myFunction(this);”> </div> <div class=”column”> <img src=”img_mountains.jpg” alt=”Mountains” onclick=”myFunction(this);”> </div> <div class=”column”> <img src=”img_lights.jpg” alt=”Lights” onclick=”myFunction(this);”> </div> </div> <!– The expanding image container –> <div class=”container”> <!– Close the image –> <span onclick=”this.parentElement.style.display=’none'” class=”closebtn”>×</span> <!– Expanded image –> <img id=”expandedImg” style=”width:100%”> <!–…

w3.css 가로 스크롤 가능 이미지 갤러리 CSS를 사용하여 가로 스크롤 막대가 있는 이미지 갤러리를 만드는 방법을 알아보자. 가로 스크롤을 사용하여 이미지 갤러리 만들기 1단계) HTML 추가 <div class=”scroll-container”> <img src=”img_5terre.jpg” alt=”Cinque Terre”> <img src=”img_forest.jpg” alt=”Forest”> <img src=”img_lights.jpg” alt=”Northern Lights”> <img src=”img_mountains.jpg” alt=”Mountains”> </div> 2단계) CSS 추가 div.scroll-container { background-color: #333; overflow: auto; white-space: nowrap; padding: 10px; } div.scroll-container img { padding: 10px; }

w3.css 반응형 이미지 갤러리 CSS를 사용하여 반응형 이미지 갤러리를 만드는 방법을 알아보자. 이미지 갤러리 만들기 1단계) HTML 추가 <div class=”responsive”> <div class=”gallery”> <a target=”_blank” href=”img_5terre.jpg”> <img src=”img_5terre.jpg” alt=”Cinque Terre”> </a> <div class=”desc”>Add a description of the image here</div> </div> </div> <div class=”responsive”> <div class=”gallery”> <a target=”_blank” href=”img_forest.jpg”> <img src=”img_forest.jpg” alt=”Forest”> </a> <div class=”desc”>Add a description of the image here</div> </div> </div> <div class=”responsive”> <div class=”gallery”> <a target=”_blank” href=”img_lights.jpg”> <img src=”img_lights.jpg” alt=”Northern Lights”> </a> <div class=”desc”>Add a description of the image…

w3.css 이미지 그리드 이미지 격자를 만드는 방법을 알아보자. 이미지 격자 만들기 1단계) HTML 추가 <div class=”row”> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img src=”underwater.jpg”> </div> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img src=”underwater.jpg”> </div>…

w3.css 반응형 이미지 그리드 반응형 이미지 그리드를 만드는 방법을 알아보자. 이미지 격자 만들기 1단계) HTML 추가 <div class=”row”> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img src=”underwater.jpg”> </div> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img…