Чистый CSS, чтобы навести курсор на div, скрыть содержимое, а затем отобразить новый текст

Я хочу отобразить некоторый контент в элементе столбца div (значок и некоторый текст заголовка). Когда я навожу курсор на текст, я пытаюсь скрыть содержимое, перемещая поле поверх старого содержимого, а затем отображая больше информации поверх нового цвета.

В настоящее время я использую элемент :before psuedo для перехода к новому цвету фона, который изначально имеет непрозрачность 0, а затем переходит к полной непрозрачности. Кажется, я не могу заставить свой дочерний элемент div отображаться сверху.

.feature {
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 5%;
  text-align: center;
  box-sizing: border-box;
}

.feature h2 {
  font-size: 1.5em;
  color: #006699;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.feature a {
  text-decoration: none;
}

.feature .icon {
  font-size: 3em;
  color: #575757;
}

.feature:before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0;
  background-color: #003366;
  transition: all 0.33s ease;
  z-index: 10;
}

.feature .details {
  display: none;
  z-index: 15;
}

.feature:hover:before {
  height: 100%;
  opacity: 1;
  box-shadow: inset 0px 0px 2px 2px rgba(75, 179, 219, 0.75);
  z-index: 10;
}

.features:hover .details {
  display: block;
  color: #fff;
}

<div class = "feature h_medium bg-gray radius-2">
  <div class = "icon mb-15">
    <i class = "fas fa-people-carry"></i>
  </div>
  <h2>Main Title</h2>
  <div class = "details">
    <h2>Main Title (again)</h2>
    <p>Some level of content that describes the title</p>
  </div>
</div>

Я ожидаю, что наведение сначала заполнит обложку синего поля над элементом функции, а затем я ожидаю, что div с подробностями заполнит синее поле.

html css css-transitions

13.07.2019 06:03

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

631

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вот мое решение для вас. Надеюсь, он будет соответствовать вашим требованиям. Я только что сделал некоторые изменения в следующих блоках. Не стесняйтесь сообщить, если вы столкнетесь с какой-либо проблемой.

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
}

.feature {
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 5%;
    text-align: center;
    box-sizing: border-box;
}

.feature h2 {
    font-size: 1.5em;
    color: #006699;
    margin-top: 0;
    margin-bottom: 0.5em;
}

.feature a {
    text-decoration: none;
}

.feature .icon {
    font-size: 3em;
    color: #575757;
}

.feature:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 0;
    background-color: #003366;
    transition: all 0.33s ease;
    z-index: 10;
}

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover:before {
    height: 100%;
    opacity: 1;
    box-shadow: inset 0px 0px 2px 2px rgba(75,179,219,0.75);
    z-index: 10;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
}

<div class = "feature h_medium bg-gray radius-2">
        <div class = "icon mb-15">
            <i class = "fas fa-people-carry"></i>
        </div>
        <h2>Main Title</h2>
        <div class = "details">
            <h2>Main Title (again)</h2>
            <p>Some level of content that describes the title</p>
    </div>
    </div>

13.07.2019 07:02

Другие вопросы по теме

Как добавить defaultprops или значение в реакцию

Как установить кнопку + вертикальный центр с элементом ввода?

Считаются ли внутренние вкладки панели навигации ссылками или кнопками в целях доступности и какие псевдосостояния они требуют?

Каким будет самый эффективный способ создать этот тяжелый проект javascript и css?

Есть ли способ сделать раскрывающийся список панели навигации ниже свернутой панели навигации?

Как центрировать контент

Как заполнить ширину фонового изображения примерно наполовину с наложением контента сверху?

Как удалить псевдокласс :target со всей страницы только с помощью HTML/CSS?

Анимированный эффект подчеркивания при наведении для элементов с переносом текста

Как разместить элементы непосредственно под элементом

Чистый CSS, чтобы навести курсор на div, скрыть содержимое, а затем отобразить новый текст

Ответы 1

Другие вопросы по теме

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