w3.css 투명한 텍스트가 포함된 이미지 CSS를 사용하여 투명(투명) 배경 텍스트가 있는 이미지를 만드는 방법을 알아보자. 투명한 이미지 텍스트를 만드는 방법 1단계) HTML 추가 <div class=”container”> <img src=”notebook.jpg” alt=”Notebook” style=”width:100%;”> <div class=”content”> <h1>Heading</h1> <p>Lorem ipsum..</p> </div> </div> 2단계) CSS 추가 .container { position: relative; max-width: 800px; /* Maximum width */ margin: 0 auto; /* Center it */ } .container .content { position: absolute; /* Position the background text */ bottom: 0; /* At the bottom. Use top:0 to append it to…

w3.css 이미지 위의 텍스트 블록 이미지 위에 텍스트 블록을 배치하는 방법을 알아보자. 이미지에 텍스트 블록을 배치하는 방법 1단계) HTML 추가 <div class=”container”> <img src=”nature.jpg” alt=”Norway” style=”width:100%;”> <div class=”text-block”> <h4>Nature</h4> <p>What a beautiful sunrise</p> </div> </div> 2단계) CSS 추가 /* Container holding the image and the text */ .container { position: relative; } /* Bottom right text */ .text-block { position: absolute; bottom: 20px; right: 20px; background-color: black; color: white; padding-left: 20px; padding-right: 20px; }

w3.css 이미지 위에 텍스트 배치 이미지 위에 텍스트를 배치하는 방법을 알아보자. 이미지에 텍스트를 배치하는 방법 1단계) HTML 추가 <div class=”container”> <img src=”img_snow_wide.jpg” alt=”Snow” style=”width:100%;”> <div class=”bottom-left”>Bottom Left</div> <div class=”top-left”>Top Left</div> <div class=”top-right”>Top Right</div> <div class=”bottom-right”>Bottom Right</div> <div class=”centered”>Centered</div> </div> 2단계) CSS 추가 /* Container holding the image and the text */ .container { position: relative; text-align: center; color: white; } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; } /* Top left text */ .top-left…

w3.css 흑백 이미지 CSS를 사용하여 “흑백” 이미지를 만드는 방법을 알아보자. 흑백 이미지 만드는 방법 CSS filter속성을 사용하여 이미지를 흑백으로 변환한다. 그레이스케일 모든 이미지의 색상을 흑백(100% 회색)으로 변경한다. img { -webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */ filter: grayscale(100%); }

w3.css 이미지 효과 추가 이미지에 시각 효과를 추가하는 방법을 알아보자. CSS 필터 CSS filter속성은 요소에 시각적 효과(예: 흐림 및 채도)를 추가한다. 참고: Internet Explorer, Edge 12 또는 Safari 5.1 이하에서는 필터 속성이 지원되지 않는다. 그레이스케일 모든 이미지의 색상을 흑백(100% 회색)으로 변경한다. img { -webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */ filter: grayscale(100%); } 흐림 모든 이미지에 흐림 효과를 적용한다. img { -webkit-filter: blur(5px); /* Safari 6.0 – 9.0 */ filter: blur(5px); }

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:…