/* Misc styling for aesthetic purpose */ body { margin:

Question

/* Misc styling for aesthetic purpose */ body { margin:

0;
background-color: black;
}

.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}

button {
z-index: 1;
padding: 1em;
font-size: 2em;
background: transparent;
border: 4px solid white;
color: white;
border-radius: 999em;
}

.background {
background-image: url('https://images.pexels.com/photos/574071/pexels-photo-574071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-size: cover;
}

/* Main CSS that making the effect work */
.background {
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
transition: filter 1s;
}

button:hover + .background {
filter: blur(7px);
}

button:hover{
transition: all 1s;
transform: scale(1.2);
}

0

18.11.2018

1 ответов

4 просмотра

8 € ∆ $ "|" · Answer 1

8 € ∆ $ "|" Автор вопроса

guys look at above css

0

18.11.2018

Похожие чаты

/* Misc styling for aesthetic purpose */ body { margin:

1 ответов

Похожие вопросы