HTML / CSS: показывать элемент при наведении, пока остальное размыто - PullRequest
Новая
       3

HTML / CSS: показывать элемент при наведении, пока остальное размыто

1 голос
/ 02 февраля 2020

Я делаю портфолио, и есть текстовые блоки, которые становятся размытыми, когда вы наводите на них курсор мыши. Смысл в том, чтобы текст «Узнать больше» появлялся в этом блоке, тогда как остальная часть текста размыта. Я так много с этим борюсь. Пожалуйста, помогите.

Вот мой текстовый блок: 

    <div class="card-body about-me-title ">
      <h5 class="text-center overlay"><a href="#">Learn More</a> </h5>
      <div class="blur-in">
        <h4 class="card-title  p-1 h1">
          <i class="fas fa-arrow-alt-circle-right pl-1"></i>
          Self-taught
        </h4>
        <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>    
      </div>
    </div>

Вот стили для него: 

.about-me-title {
    border: 1px solid white;
    border-radius: 50px;   
}

.card {
    border: none;
}   

.blur-in {
    transition: all 0.2s ease;
    -webkit-filter: blur(0px);  
}

.blur-in:hover {
    -webkit-filter: blur(12px);
}

.overlay a{
    position: absolute;
    margin-left: auto;
    margin-left: auto;
    left: 0;
    right: 0;
    font-size: 40px;
    margin-top: 2em;
}

Как видите, текст «Узнать больше» есть, но я хочу, чтобы он был скрыт и отображался при наведении, поэтому все текстовое поле становится своего рода кнопкой при наведении. Я пробовал «видимость» и «отображение» свойств, но безуспешно.

Спасибо за ваше время

Ответы [ 3 ]

0 голосов
/ 02 февраля 2020

HTML Файл 

    .about-me-title {
    border: 1px solid white;
    border-radius: 50px;   
}

.card {
    border: none;
}   

.blur-in {
    transition: all 0.2s ease;
    -webkit-filter: blur(0px);  
}

.blur-in:hover {
    -webkit-filter: blur(12px);
}

.overlay a{
    position: absolute;
    margin-left: auto;
    margin-left: auto;
    left: 0;
    right: 0;
    font-size: 40px;
    margin-top: 2em;
    -webkit-filter: blur(12px);
    color: RGBA(0.0,0.0,0.0,0.0);
}

.Learn-More:hover{
  transition: all 0.5s ease;
  -webkit-filter: blur(0px);
  color: RGBA(0.0,0.0,0.0,1.0);
}
 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <link rel="stylesheet" href="estilo.css">
 </head>
 <body>
    <div class="card-body about-me-title ">
      <h5 class="text-center overlay"><a href="#" class="Learn-More">Learn More</a> </h5>
      <div class="blur-in">
        <h4 class="card-title  p-1 h1">
          <i class="fas fa-arrow-alt-circle-right pl-1"></i>
          Self-taught
        </h4>
        <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>    
      </div>
    </div>
 </body>
 </html>
0 голосов
/ 02 февраля 2020

как насчет этого? 

.about-me-title {
  border: 1px solid white;
  border-radius: 50px;
}

.card {
  border: none;
}

.blur-in {
  transition: all 0.2s ease;
  -webkit-filter: blur(0px);
}

.blur-in:hover {
  -webkit-filter: blur(12px);
}

.overlay a {

  position: absolute;
  margin-left: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  font-size: 40px;
  margin-top: 0em;
  visibility: hidden;
  opacity: 0;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.card-body:hover .overlay a {
  visibility: visible;
  opacity: 1;
}
<div class="card-body about-me-title ">
  <h5 class="overlay text-center"><a href="#">Learn More</a> </h5>
  <div class="blur-hover">
    <div class="blur-in">
      <h4 class="card-title  p-1 h1">
        <i class="fas fa-arrow-alt-circle-right pl-1"></i>
        Self-taught
      </h4>
      <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>
    </div>
  </div>
</div>

Поэтому я добавил дополнительный div под названием Blur-in и убедился, что текст наложения находится вне этого div, иначе он тоже будет размытым. Вы можете изменить поля, позиции и стиль наложения по своему усмотрению.

Нет JS. Просто CSS и HTML.

ОБНОВЛЕНО:

Вот чистое CSS решение. Я не знаю, почему я не думал об этом раньше, но если вы просто переместите div на уровень выше, вы можете обернуть весь текст как ссылку. Вам также нужно удалить Z-Index, который вы добавили. Наконец, просто отформатируйте текст так, чтобы он выглядел так, как вы хотите (см. {} В CSS, стиль текста / ссылки). Надеюсь, это поможет! 

.about-me-title {
  border: 1px solid white;
  border-radius: 50px;
}

.card {
  border: none;
}

.blur-in {
  transition: all 0.2s ease;
  -webkit-filter: blur(0px);

}

.blur-in:hover {
  -webkit-filter: blur(12px);
}

.overlay {
  position: absolute;
  margin-left: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  font-size: 40px;
  margin-top: 0em;
  visibility: hidden;
  opacity: 0;

}

.card-body:hover .overlay {
  visibility: visible;
  opacity: 1;

}

a {
  text-decoration: none;
}
<div class="card-body about-me-title ">
<a href="#">
  <h5 class="overlay text-center">Learn More</h5>
  <div class="blur-hover">
    <div class="blur-in">
      <h4 class="card-title  p-1 h1">
        <i class="fas fa-arrow-alt-circle-right pl-1"></i>
        Self-taught
      </h4>
      <h6 class="card-subtitle text-white px-5 h2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio ipsa architecto quas explicabo necessitatibus.</h6>
    </div>
  </div>
  </a> 
</div>
0 голосов
/ 02 февраля 2020

Вы пробовали с jQuery? Я думаю, что использование методов .hide () и .show () или .hover () может помочь вам добиться такого поведения. Это может быть что-то вроде этого. 

$('.text-center').hover(() => {
  $(this).toggle();
});

Вероятно, переключение не является правильным методом, но это может помочь увидеть поведение «скрыть / показать».

...