Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- html, body {
- height: 100%;
- }
- .break {
- position: relative;
- width: 100%;
- }
- #trainer {
- div.col-md {
- padding: 5px !important;
- }
- }
- .img-container {
- width: 100%;
- position: relative;
- background: red;
- transition: 0;
- img {
- width: 100%;
- filter: grayscale(100%);
- }
- .overlay {
- //position: absolute;
- //top: 0;
- //bottom: 0;
- //left: 0;
- //right: 0;
- background: rgba(0, 0, 0, .3);
- p {
- //position: absolute;
- //bottom: 0;
- text-align: center;
- color: white;
- //left: 0;
- //right: 0;
- }
- }
- &:hover {
- background: green !important;
- position: absolute;
- width: 120%;
- margin-left: -10%;
- margin-top: -15%;
- z-index: +1;
- transition: all .12s linear;
- img {
- filter: grayscale(0%);
- transition: filter .12s linear;
- }
- .overlay {
- opacity: 0;
- transition: opacity .12s linear;
- }
- }
- &.affe ~ div {
- background: purple;
- }
- }
- @media (min-width: 576px){
- .img-container {
- .overlay {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- p {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- }
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement