Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Якобинец
306 / 16 / 1
Регистрация: 26.01.2013
Сообщений: 337
1

Создать над одним элементом другой одинаковых размеров

12.02.2018, 11:34. Просмотров 143. Ответов 1
Метки нет (Все метки)

Не силен (пока) в вёрстке, поэтому прошу знающих людей помочь.
Допустим есть разметка:
HTML5
1
2
3
4
5
<div class="commonContent">
     <div class = "shouldBeCovered">
          <more content>
     </div>
</div>
Я хочу иметь возможность над содержимым shouldBeCovered вызывать вуаль, как на рисунке (во вложении).
И вот именно вот эту задачу - чтобы она появлялась над shouldBeCovered, имела такие же размеры (то есть не надо было бы писать скрипта, чтобы задать их)

Подскажите пожалуйста следующие моменты:
1 - где должен располагаться div с "вуалью" (внутри shouldBeCovered? на одном уровне?)
2 - какие свойства нужно задать, чтобы он имел такие же размеры, как и shouldBeCovered?
0
Миниатюры
Создать над одним элементом другой одинаковых размеров  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2018, 11:34
Ответы с готовыми решениями:

Сделать textarea одинаковых размеров в разных браузерах
Доброго времени суток. Потребовалось использовать textarea, а он разного...

Как фиксировать изображение над другим элементом?
Всем доброго дня!Хочу поставить изображение над другим элементом как на...

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

Сделать два фона один за одним: сначала статическая картинка, потом повтор другой картинки по Y
не получается сделать два фона один за одним, сначала статическая картинка,...

Как наложить через z-index две картинки точно одна над другой?
Как наложить через z-index две картинки точно одна над другой? Обязательно:...

1
Qwerty_Wasd
1080 / 791 / 402
Регистрация: 16.04.2016
Сообщений: 2,149
Завершенные тесты: 2
12.02.2018, 17:12 2
Якобинец,
Цитата Сообщение от Якобинец Посмотреть сообщение
возможность над содержимым shouldBeCovered вызывать вуаль
вы не указали, что за событие будет это делать. Предположим, просто предположим, при наведении на shouldBeCovered. К примеру - песочница
HTML5
1
2
3
<div class="commonContent">
  <div class="shouldBeCovered">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus saepe expedita, perspiciatis, vero sunt itaque harum id suscipit enim, quos mollitia? Perspiciatis suscipit ab hic dicta tenetur, est rerum incidunt.</div>
</div>
CSS
1
2
3
4
5
6
*,*:after,*:before{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0;outline:0}
html,body{height:100%;width:100%;}
.commonContent{height:200px;width:100%;border:2px solid}
.shouldBeCovered{position:relative;height:100%;width:100%;border:2px solid red;}
.shouldBeCovered::after{position:absolute;top:0;left:0;bottom:0;right:0;content:"";background:rgba(122, 122, 122, 0);-webkit-transition:1s;-o-transition:1s;transition:1s}
.shouldBeCovered:hover::after{background:rgba(122, 122, 122, 0.5);border:5px dashed gray;-webkit-transition:1s;-o-transition:1s;transition:1s}
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2018, 17:12

Даны два двухмерных массива одинаковых размеров. Создать третий массив такого же размера, каждый элемент которого равен 100
Даны два двухмерных массива одинаковых размеров. Создать третий массив такого...

При переносе кнопки над элементами, можно ли узнать над каким элементом переносишь?
А точнее, у меня на страничке куча кнопок, одну я беру и переношу в...

Как создать таблицу, с одним из полем, у которого ограниченный выбор ввода из другой таблицы
Всем добрый день) Мы в университете только начали проходить базы данных. Мне...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru