Tạo hiệu ứng hiển thị hình ảnh chỉ CSS với Biên giới trong suốt

Trong CSS, chúng tôi sử dụng hai biến CSS, --bgc và --lờ mờ cho màu nền và kích thước của .foo container, tương ứng. Trong ví dụ này, tôi đã sử dụng cùng giá trị cho chiều rộng và chiều cao để có được một hộp hình vuông, tạo các biến riêng biệt cho chiều cao và chiều rộng nếu bạn muốn một hình chữ nhật.

Chúng tôi cũng thêm vị trí: tương đối quy tắc để .foo, để các yếu tố giả của nó, mà chúng ta sẽ sử dụng cho tiết lộ hình ảnh, có thể vị trí tuyệt đối (xem bên dưới), và do đó xếp chồng lên nhau.

 .foo --bgc: # FFCC03; --dim: 300px; chiều rộng: var (- mờ); chiều cao: var (- mờ); màu nền: var (- bgc); vị trí: tương đối;  

Chúng tôi thêm một sản phẩm nào Nội dung bất động sản cho cả hai yếu tố giả, .foo :: trước và .foo :: sau, để làm cho chúng được kết xuất đúng.

 .foo :: trước, .foo :: sau nội dung: "; vị trí: tuyệt đối; trái: 0; top: 0; 

Các .foo yếu tố, hai yếu tố giả của nó, .foo :: trước, .foo :: sau, và của họ :bay lượn lớp giả có được một quá độ bất động sản răng se thêm một chuyển tiếp dễ dàng cho họ trong 500 mili giây (nửa giây).

 .foo, .foo: hover, .foo :: trước, .foo :: after, .foo: hover :: trước, .foo: hover :: after quá trình: biến đổi 500ms dễ dàng;  

2. Thêm hình ảnh

Chúng tôi thêm hình ảnh vào .foo :: trước yếu tố giả làm hình nền, và kích thước nó để bao gồm toàn bộ phần tử giả với chiều rộng và Chiều cao tính chất. Chúng tôi xếp nó ngay bên dưới .foo thành phần sử dụng chỉ số z: -1 quy tắc.

 .foo :: trước chiều rộng: 100%; chiều cao: 100%; nền: url (camel.png) trung tâm / bìa; chỉ số z: -1;  

Các trung tâm từ khóa trung tâm hình ảnh, trong khi che từ khóa chia tỷ lệ hình ảnh thành bao gồm toàn bộ yếu tố trong khi duy trì tỷ lệ khung hình của nó.

Trên ảnh chụp màn hình bên dưới bạn có thể thấy những gì chúng ta có cho đến nay (chỉ số z được xóa khỏi .foo :: trước để nó có thể được nhìn thấy):

3. Thêm nền trượt

Để thêm nền nhỏ hơn (trượt ra) phía sau hình ảnh, chúng ta sẽ sử dụng phần tử giả khác, .foo :: sau.

Chúng tôi tạo một biến CSS khác, --b, cho chiều rộng biên giới. Chúng tôi cung cấp ba đường viền trong suốt để ::sau yếu tố giả: trên, bên phải và dưới cùng.

 .foo :: sau --b: 20px; chiều rộng: calc (100% - var (- b)); chiều cao: calc (100% - calc (var (- b) * 2)); viền: var (- b) rắn trong suốt; biên trái: không có; hộp bóng: inet 0 var (- dim) 0 var (- bgc); bộ lọc: độ sáng (.8); chỉ số z: -2;  

Các chiều rộng được tính như calc (100% - var - b)) trả lại tổng chiều rộng của .foo trừ tổng chiều rộng của các đường viền ngang của nó (chỉ đường viền phải, vì không có đường viền trái).

Các Chiều cao được tính như calc (100% - calc (var (- b) * 2)) trả lại tổng chiều cao của .foo trừ tổng chiều rộng của đường viền dọc của nó (viền trên và dưới).

Với bóng hộp tài sản, chúng tôi cũng thêm một bóng chèn ngang có kích thước giống như .foo (đó là var (- mờ)).

Một bộ lọc CSS của độ sáng (.8) làm tối màu nền một chút, và cuối cùng, chỉ số z: -2 quy tắc đặt ::sau phần tử giả bên dưới ::trước có chứa hình ảnh.

Đây là ảnh chụp màn hình của bản demo kết xuất cho đến nay (với chỉ số z loại bỏ khỏi cả hai yếu tố giả để chúng có thể được nhìn thấy):

4. Thêm biến đổi

Chúng tôi thêm biến đổi bất động sản đến hai yếu tố giả, vì vậy khi người dùng di chuyển qua .foo, cả hai yếu tố giả là di chuyển theo chiều ngang.

Như chúng ta đã thêm quá độ tài sản cho tất cả các yếu tố ở cuối Bước 1, chuyển động của hình ảnh và nền của nó là cả hoạt hình.

 .foo: hover :: trước, .foo: hover :: after Transform: translateX (100%);  

Dưới đây, bạn có thể thấy bản demo cuối cùng.

Tiền thưởng: Ký quỹ tùy chọn

Nếu bạn hiển thị .foo bên cạnh các yếu tố khác trên một trang và muốn các yếu tố khác này chuyển đi khi hình ảnh và nền của nó trượt ra thêm một lề phải có cùng chiều rộng với .foo để .foo: di chuột thành phần.

 .foo: hover lề-phải: var (- mờ);