Hướng dẫn background video overlay css - lớp phủ video nền css
Image Hover Overlay có thể hiểu sang tiếng việt là hình ảnh được che phủ khi hover, đúng với các tên của nó, Image Hover Overlay là các hình ảnh mà khi hover chuột lên nó, hình ảnh sẽ được che phủ bởi một đoạn text, một button hay một liên kết nào đó. Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một số Image Hover Overlay với các hiệu ứng khác nhau. 1. Xây dựng giao diệnĐầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file Code
Trong ứng dụng này chúng ta sẽ có hai thành phần chính đó là phần hình ảnh và phần thẻ div, cái sẽ được hiện hiện đè lên hình ảnh khi hình ảnh được hover. Bài viết này được đăng tại [free tuts .net] OK giờ chuyển qua bước tiếp theo. 2. Thêm CSS cho giao diệnChúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style: .main { width: 500px; text-align: center; margin: auto; } .container { position: relative; width: 100%; } .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: #888888; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } Đầu tiên, mình sẽ đặt thuộc tính Tiếp đến khi hình ảnh được hover, mình đặt lại .main { width: 500px; text-align: center; margin: auto; } .container { position: relative; width: 100%; } .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: #888888; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }0 cho phần thẻ div này và nó sẽ được hiển thị đè lên phàn hình ảnh. Chúng ta cũng có thể sử dụng đoạn mã CSS sau để thay thế cho đoạn CSS trên nếu bạn muốn một hiệu ứng khác khi hover vào hình ảnh: .main { width: 500px; text-align: center; margin: auto; } .container { position: relative; width: 100%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #888888; overflow: hidden; width: 100%; height:0; transition: .5s ease; } .container:hover .overlay { bottom: 0; height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } Khác với ở trên, lần này mình không sử dụng thuộc tính opacity nữa mà mình sẽ lợi dụng thuộc tính height và transition:
Dựa vào các thuộc tính của CSS, các bạn có thể tùy biến rất nhiều hiệu ứng, ở đây mình không thể trình bày hết được, giờ các bạn chạy file 3. Lời kếtNhư vậy, qua bài viết này mình đã cùng các bạn tạo một Image Hover Overlay với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net. Tham khảo: w3schools.com How do you add a color overlay to a video like this, as seen here: Here is my code so far: HTML
CSS
Fiddle here: https://jsfiddle.net/kggv3213/1/ asked Feb 24, 2018 at 10:59Feb 24, 2018 at 10:59
methuselahmethuselahmethuselah 12.3k43 gold badges152 silver badges290 bronze badges43 gold badges152 silver badges290 bronze badges 0 you can try pseudo element with gradient background:
answered Feb 24, 2018 at 11:01Feb 24, 2018 at 11:01
Temani AfifTemani AfifTemani Afif 225k19 gold badges262 silver badges365 bronze badges19 gold badges262 silver badges365 bronze badges Keep it simple, just add
answered Feb 24, 2018 at 12:21Feb 24, 2018 at 12:21
1 |