Видими и невидими блокове с помощта на CSS

Здравейте приятели. Искам да ви покажа как да създавате едновременно видими и невидими блокове на статична страница или публикация. Има много начини, използвайки CSS, да направите всеки елемент на страница скрит (невидим). Например:
➤Можете да използвате свойството opacity, като му зададете значение 0;
➤Със свойството display блокът напълно ще изчезне от уеб страницата, без следа;
➤Със свойството visibility също ще скрием нашия елемент, но това ще се отрази на оформлението на страницата;
➤За да покажете невидим елемент, можете да използвате и псевдоклас  :hover;
Има много и достатъчно информация по този въпрос, но няма да се спирам подробно на всеки един елемент. Ще ви дам прост код, с който можете да покажете видимия блок и невидимия, като последният ще се появи, когато задържите курсора мишката върху първия. Може би този ефект ще намери приложение във вашия блог.
Веднага искам да обърна внимание на факта, че невидимият, появяващ се блок, заема място на страницата, дори и да не се вижда.

По-добре е да използвате този ефект в най-долната част на публикация или страница, за да не нарушите цялостното им оформление.

За по-голяма яснота копирайте желания код и го инсталирайте в този редактор, за да го прегледате и редактирате. Задръжте курсора на мишката над блока, който се показва. Предоставям ви кода в три варианта.

Скрит блок, съдържащ текст

Пример

Видим блок

Един простичък код, с който ще изобразите видим и невидим блок с текст в публикация

Код

<!--On-Hover Hidden-Block By Blogzablogove.com-->

<div class="on-hover">

Видим блок

</div>

<div class="hidden-block">

Един простичък код, с който ще изобразите видим и невидим блок с текст в публикация

</div>

<style>.on-hover{

width:300px;

background:#26c6da;

color:#fff;

font-size:28px;

border:3px solid #26c6da;

padding:20px;

margin:auto;

margin-bottom:20px;

text-align:center;

}

.hidden-block{

width:300px;

background:#26c6da;

color:#fff;

font-size:25px;

border:3px solid #26c6da;

padding:20px;

margin:auto;

text-align:center;

opacity:0; /*елемент на прозрачност (за скрития блок)*/

transition: 1s; /*скорост на прехода */

}

.on-hover:hover+ .hidden-block{

opacity:1;

transition: 1s;

}

</style>

<!--On-Hover Hidden-Block By Blogzablogove.com end-->

Скрит блок, съдържащ текст и изображение

Пример

Видим блок

Един простичък код, с който ще изобразите видим и невидим блок с текст и изображение в публикация.

Код

<!--On-Hover Hidden-Block By Blogzablogove.com-->

<div class="on-hover">

Видим блок

</div>

<div class="hidden-block">

Един простичък код, с който ще изобразите видим и невидим блок с текст и изображение в публикация<br />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFODXOgrQ9njx_qAKIptgOYIeN7I4vuvNHEo2TvjFdSk_YxktqZZ3Q8UB07byI5MSOjfXb6jt9OsJlBkC3B4Onhyphenhyphen_rPjAmi5AeGueqFtiKtP8nt4r7TpkdnIH5HxkFHflf06qAzsJjDk3F/h300/blog.jpg" />

</div>

<style>.on-hover{

width:300px;

background:#26c6da;

color:#fff;

font-size:28px;

border:3px solid #26c6da;

padding:20px;

margin:auto;

margin-bottom:20px;

text-align:center;

}

.hidden-block{

width:300px;

background:#26c6da;

color:#fff;

font-size:25px;

border:3px solid #26c6da;

padding:20px;

margin:auto;

text-align:center;

opacity:0; /*елемент на прозрачност (за скрития блок)*/

transition: 1s; /*скорост на прехода */

}

.on-hover:hover+ .hidden-block{

opacity:1;

transition: 1s;

}</style>

<!--On-Hover Hidden-Block By Blogzablogove.com end-->

Скрит блок, съдържащ само изображение

Пример

Видим блок

 

Код

<!--On-Hover Hidden-Block By Blogzablogove.com-->

<div class="on-hover">

Видим блок

</div>

<div class="hidden-block">

&nbsp;<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFODXOgrQ9njx_qAKIptgOYIeN7I4vuvNHEo2TvjFdSk_YxktqZZ3Q8UB07byI5MSOjfXb6jt9OsJlBkC3B4Onhyphenhyphen_rPjAmi5AeGueqFtiKtP8nt4r7TpkdnIH5HxkFHflf06qAzsJjDk3F/h300/blog.jpg" />

</div>

<style>.on-hover{

width:300px;

background:#26c6da;

color:#fff;

font-size:28px;

border:3px solid #26c6da;

padding:20px;

margin:auto;

margin-bottom:20px;

text-align:center;

}

.hidden-block{

width:300px;

background:#26c6da;

color:#fff;

font-size:25px;

border:3px solid #26c6da;

padding:20px;

margin:auto;

text-align:center;

opacity:0; /*елемент на прозрачност (за скрития блок)*/

transition: 1s; /*скорост на прехода */

}

.on-hover:hover+ .hidden-block{

opacity:1;

transition: 1s;

}</style>

<!--On-Hover Hidden-Block By Blogzablogove.com end-->

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

С благодарности към Виктория Барад. За търпението и щедростта. Не, че тя е откривател, но моралът го изисква.

За въпроси моля, в коментарите. А може и на тази страница.

Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:

Или подкрепете моя проект

Здраве за всички вас! Не забравяйте да правите добро на други хора!


Поздравявам ви с настъпването на Новата 2020 година! Бъдете здрави, ентусиазирани, креативни и успели блогъри!