Невозможно позиционировать контент после установки CSS эффектов наведения и размытия - PullRequest
Новая
       3

Невозможно позиционировать контент после установки CSS эффектов наведения и размытия

1 голос
/ 08 марта 2020

Целевая страница с классом: витрина установлена ​​с размытием после эффекта и прекрасно работает. Установите три стилизованные кнопки, 2 будущие ссылки на галереи и 1 кнопку mailto.

Кажется, что я никак не могу позиционировать контент после этого. То же самое в отзывчивом представлении, не в состоянии вывести и опустить вниз.

Любая помощь очень ценится. Спасибо тебе 

body{
  background-color: #00091A;
  margin: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

html{
  color: white;
  font-family: Caveat, cursive;
}

.title, .text{
  color: white;
  text-shadow: 1px 2px 2px #B36C52;
}

.showcase::after{
  content: '';
  height: 100vh;
  width: 100%;
  background-image: url(Pics/showcase.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  transition: all 1000ms;
}

.showcase:hover::after{
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.showcase:hover .content{
  filter: blur(3px);
  -webkit-filter: blur(3px);
}

.content{
  position: absolute;
  z-index: 1;
  top: 15%;
  left: 35%;
  text-align: center;
  transition: all 1000ms;
}

.content .logo{
  height: 180px;
  width: 180px;
}

.content .title{
  font-size: 1.5rem;
  margin-top: 0.8rem;
}

.content .text{
  line-height: 1.5;
  margin-top: 0.8rem;
}

.button{
  font-size: 18px;
  color: white;
  width: 160px;
  height: 100px;
  text-align: center;
  padding: 2px;
  left: 30%;
  border-radius: 50%;
  font-family: Caveat, sans-serif;
  background: #CE5937;
  background: -moz-radial-gradient(center, #004D59 10%, #001C21 50%, #000D0F 100%);
  background: -webkit-radial-gradient(center, #004D59 10%, #001C21 50%, #000D0F 100%);
  background: radial-gradient(ellipse at (center, #004D59 10%, #001C21 50%, #000D0F 100%);
}

footer{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  overflow: hidden;
}
image
...