12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- @import "styles/_variables.scss";
- .item {
- width: 50%;
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- padding: 3px;
- .sub_a {
- width: 100%;
- height: 100px;
- position: relative;
- border-radius: $border-radius;
- overflow: hidden;
- box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
- > img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: bottom;
- filter: grayscale(85%) blur(3px);
- transition: all 0.5s;
- }
- > h3 {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: $white;
- text-transform: uppercase;
- font-weight: 500;
- letter-spacing: 5px;
- text-align: center;
- }
- &:hover {
- > img {
- transition: all 0.5s;
- filter: grayscale(50%);
- }
- }
- }
- }
|