Lớp phủ là một hiệu ứng được sử dụng trên trang web để hướng người dùng đi đúng hướng của hành động tiếp theo mà họ phải thực hiện. Việc sử dụng đúng cách có khả năng tạo ra trải nghiệm người dùng tích cực, điều này sẽ giữ chân người dùng trên trang web của bạn.
Có một số cách để tạo lớp phủ. Không có một cách nào đúng cả - tất cả chỉ là chọn cách phù hợp nhất với trang web của bạn và những gì bạn cần.
Trong hướng dẫn này, chúng tôi sẽ tập trung vào việc sử dụng HTML và CSS cơ bản (không có JavaScript) để có được hiệu ứng lớp phủ mà bạn đang tìm kiếm khi di chuột qua hình ảnh.
Chặn HTML của bạn
Hãy tạo bảng soạn thảo HTML của bạn sẽ được sử dụng để tạo lớp phủ hình ảnh của chúng tôi:
<html> <head> <style> /*No CSS to display yet*/ </style> </head> <body> <div class="container" ></div> </body> </html>
Hiểu vấn đề
Khi thử một điều gì đó mới lần đầu tiên, bạn nên ngồi lại và suy nghĩ về cách giải quyết vấn đề trước khi tham khảo ý kiến của một công cụ tìm kiếm. Khi bạn có hiểu biết vững chắc về cách lớp phủ hoạt động và những gì chúng ta cần làm, bạn sẽ gặp may mắn hơn khi tra cứu các gợi ý và mẹo, nếu cần.
Tóm lại, một lớp phủ đi qua một vùng chứa (trong ví dụ của chúng ta là một hình ảnh) và thực hiện một điều gì đó với hình ảnh khi chúng ta di chuột qua nó. Điều này hướng người dùng tương tác với trang web.
Về phía trước, hãy nghĩ đến một bức tranh toàn cảnh - đừng cố kể hết những chi tiết nhỏ nhất về cách thực hiện điều này. Chúng tôi có một hình ảnh và chúng tôi có một lớp phủ - đó là ít nhất hai vùng chứa. Và hai thùng đó cần phải ở trong một thùng lớn hơn.
Đừng cố tạo kiểu bất cứ thứ gì - hãy làm việc hoàn toàn trên HTML và viết mã. Hãy xem liệu bạn có thể tự chặn nó hay không trước khi xem phần đánh dấu bên dưới:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<html> <head> <style> /*No CSS to display yet*/ </style> </head> <body> <div class="container" > <div class="overlay-outer> <img class="item-to-overlay" src="file-here" alt="this-is-our-image" /> <div class="overlay-inner"> This is our overlay div. </div> </div> </div> </body> </html>
Khi chúng ta đã tìm ra các khối chính, chúng ta có thể làm việc với việc tạo kiểu. Tôi thích bắt đầu từ bên ngoài / thùng chứa lớn hơn và làm việc theo cách của tôi vào các thùng chứa nhỏ hơn. Nó giúp theo dõi chiều rộng thực tế của container. Bạn có thể thấy mình thích bắt đầu từ bên trong và làm việc theo cách của mình - điều đó cũng hoàn toàn ổn. Hãy cùng tôi theo dõi bên dưới.
Phần thân
Bắt đầu từ bên ngoài và làm việc theo cách của chúng tôi, trước tiên chúng ta đến với thẻ body - nó là vùng chứa lớn nhất trên trang và giữ trang của chúng ta. Tại đây, bạn có thể đặt màu nền, lề cũng như chiều rộng và chiều rộng tối đa của ứng dụng:
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
}
</style>
Div.container
Hộp chứa tiếp theo mà chúng tôi đến là div đầu tiên của chúng tôi. Điều này là khá đơn giản. Chúng tôi chỉ muốn chiều rộng của nó là 100%.
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
div.container {
width: 100%;
}
</style>
Div.overlay-bên ngoài
Khi chúng ta đi sâu vào phần đánh dấu, <div> tiếp theo chúng tôi đến là trang có class=”overlay-outer” . Đây là nơi chúng ta cần bắt đầu suy nghĩ về kiểu dáng của lớp phủ của chúng ta.
Điều đầu tiên chúng ta cần làm là tạo định nghĩa cho vùng chứa mà hình ảnh và lớp phủ sẽ nằm trong đó. Chúng ta muốn vùng chứa lớp phủ của mình chiếm bao nhiêu phần trăm chiều rộng của trang web? Còn về chiều cao? Đây cũng là <div> nơi chúng ta cần thiết lập “hàng rào” cho hình ảnh của mình. Vì vậy, chúng ta cần thêm thuộc tính vị trí vào phần tử:
<style>
body {
background-color: gray;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
div.container {
width: 100%;
}
div.overlay-outer {
width: 50%;
height: 400px;
position: relative;
}
div.
</style>
CSS Overlay kết hợp rất nhiều thứ mà chúng ta đã học được trong CSS:định vị, màu nền, độ mờ, đối tượng phù hợp và div. Sau khi tạo kiểu cho vùng chứa lớp phủ bên ngoài, chúng ta cần xem xét hình ảnh và vùng chứa lớp phủ bên trong.
Img
Phần tử hình ảnh cần phải phù hợp với chiều rộng và chiều cao của vùng chứa mà nó nằm trong đó. Đây cũng là nơi để đặt đường viền nếu bạn muốn và để cắt hình ảnh của bạn.
Div.overlay-inner
Lớp phủ bên trong <div> và phong cách của nó liên quan đến giao diện thực tế của lớp phủ. Đây là nơi bạn sẽ chọn màu nền cho lớp phủ của mình, đặt độ mờ thành 0. Quan trọng nhất, chúng ta cần thêm position: absolute, top: 0 and left: 0 sao cho div overlay-inside sẽ tự định vị trên <div> được đặt ở vị trí:tương đối.
Div.overlay-inner p
Ở đây chúng tôi tạo kiểu cho nội dung thực tế của vùng chứa lớp phủ.
Div.overlay-external:di chuột .overlay-inner
Cuối cùng, chúng tôi sẽ đặt một:hover pseudo-class trên vùng chứa lớp phủ bên ngoài của chúng tôi để lớp phủ sẽ hiển thị khi chúng ta di chuột qua nó:
.outside:hover .inside {
opacity: .8;
transition: opacity .5s;
}
Đặt độ mờ từ 0 đến 1 cho phép màu nền được gán cho div lớp phủ bên trong trở thành trong suốt. Thuộc tính chuyển đổi giúp nó chuyển đổi mượt mà từ độ mờ đục 0 sang độ mờ đục 8.
Bây giờ bạn đã tạo thành công lớp phủ CSS. Chúc mừng!
Sử dụng CSS và HTML là một trong những cách bạn có thể tạo lớp phủ cho một phần tử. Đối với giải pháp này, chúng tôi đã sử dụng một số thuộc tính từ CSS để hỗ trợ:chuyển tiếp, vị trí, phù hợp với đối tượng, chiều rộng, chiều cao và hơn thế nữa.
Trong bài viết này, chúng ta cũng đã học cách tiếp cận vấn đề, cách chặn HTML và sau đó là cách tạo kiểu CSS cho hiệu ứng lớp phủ của chúng ta. Trong trình chỉnh sửa mã dưới đây là một ví dụ hoạt động về các điểm được đề cập ở đây:
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
background: grey;
max-width: 800px;
height: 1000px;
}
.outside {
width: 75%;
height: 400px;
display: inline-block;
position: relative;
cursor: pointer;
}
.images {
width: 100%;
height: 400px;
object-fit: cover;
border: 5px double black;
}
.inside {
background-color: #9c1203;
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
}
.inside p {
color: #fff;
line-height: 150px;
font-family: 'arial';
padding: 20px;
text-align: left;
}
.outside:hover .inside {
opacity: .8;
transition: opacity .5s;
}
</style>
</head>
<body>
<div class="container" >
<h1>CSS Overlay</h1>
<div class="overlay-outer>
<img class="images" src="https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3367&q=80" /> alt="this-is-our-image" />
<div class="overlay-inner">
<p>This is an overlay!</p>
</div>
</div>
</div>
</body>
</html>
Hãy dành thời gian để thử với phần đánh dấu để xem liệu bạn có thể tạo phiên bản lớp phủ này của riêng mình hay không.