hover эффект при наведении на блок

243

16 марта 2017, 19:58

Уже который день питаюсь сверстать:

Смысл в пом, что при наведении на заголовок должна появляться рамка, дополнительный текст и кнопка.

Сделал 4 блока:

html

<div class="container">
    <section class="advantages one"></section>
    <section class="advantages two"></section>
    <section class="advantages three"></section>
    <section class="advantages four"></section>
</div>

css

.container::before,
.container::after {
    content: "";
    display: table;
}
.container::after {
    clear: both;
}
.advantages {
    float: left;
    width: 50%;
    height: 50vh;
}
.advantages.one {
    background-image: url(/img/1.jpg);
}
.advantages.two {
    background-image: url(/img/2.jpg);
}
.advantages.three {
    background-image: url(/img/3.jpg);
}
.advantages.four {
    background-image: url(/img/4.jpg);
}

И на этом все. Как я только не про бывал крутить. Может кто-то дать малейшую наводку по реализации?

Answer 1

Пример

.advantages { 
  background-image: url(http://placehold.it/250x250/999999/999999); 
  background-repeat: no-repeat; 
  height: 250px; 
  width: 250px; 
  position: relative; 
} 
 
.advantages:before { 
  content: ''; 
  position: absolute; 
  top: 5px; 
  left: 5px; 
  right: 5px; 
  bottom: 5px; 
  z-index: 1; 
  border: 2px solid #fff; 
  opacity: 0; 
  transition: opacity .3s; 
} 
 
.advantages:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.25); 
  opacity: 0; 
  transition: opacity .3s; 
} 
 
.advantages-text { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 1; 
  text-align: center; 
  color: #fff; 
  opacity: 0; 
  transition: opacity .3s; 
} 
 
.advantages:hover:before, 
.advantages:hover:after, 
.advantages:hover .advantages-text { 
  opacity: 1; 
}

<div class="advantages"> 
  <div class="advantages-text"> 
    <h2>Title</h2> 
    <p>text</p> 
    <a href="#">Button</a> 
  </div> 
</div>

Answer 2

Вроде так

* { 
  margin: 0; 
  padding: 0; 
} 
 
.block { 
  width: 30%; 
  height: 200px; 
  background: red; 
  margin: 20px; 
  position: relative; 
} 
 
.overlay { 
  width: 90%; 
  height: 90%; 
  border: 1px solid #fff; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  opacity: 0; 
  color: #fff; 
  text-align: center; 
} 
 
.block:hover .overlay { 
  opacity: 1; 
  transition: opacity 1s linear; 
}

<div class="block"> 
  <div class="overlay"> 
    этот блок появится 
  </div> 
</div>

Создание сайта для строительной компании в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как отличить переменную от метода в С#?

Изучаю основыВычисление объема сферы, фрагмент кода

241

не работает SceneManager.LoadScene

Добрый день всемПоявилась проблема: сделал кнопки на двух сценах, чтобы можно было переходить между ними

481

Как правильно работать с regular expressions Groups с#

Имеется некоторое выражение (Например: 50,41+30,42 либо просто 50,41), то есть 2 числа (могут быть дробные/целые, положительные/отрицательные) и знак...

275

COMBOBOX вывод значений из базы MSSQL в DBGrid, C#

309