Оформление текста за картинкой

Увидела очень интересное оформление текста. В этом оформлении текст — не главное, а важно то, как он будет интересно спрятан.

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

Код нашла на зарубежном сайте - https://www.exeideas.com.

Код сделан на CSS, то есть никаких скриптов в нём нет и загружать сайт он не будет. Картинки ищем любые на ваш вкус.

Прячем текст за фотографией

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

Посмотрите на само оформление:

Сам код такой:

<style>
.cover {
position: relative;
width: 600px;
height: 400px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}
.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_GrUJA-IG5ymEY7D6JtAFAJnZabGFiW1cAlSOWGrLAFl-fXd-mLNCKnU4gDZGNuQYbUq84Qixf8awnK1tjhsuXyQFzwwgwWUOcN-DIJiMIplBvYGdALwKxTwKsVasyk8yLWB-8PxwfBp/s400/84.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocZaBDMjYR2vbB_eKa8WuLYqZ6tTPtwC59MpXfTZj1731oaos_q1JFgDrUo1nU9hQrayOCLfLjW54BIrlmthVdaNBdFCSJNjIVAkX_VPfYQWOPh8bEoVI0sCO_DMD_I1bph9WsCZamtdJ/s400/84098.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
</style>
<div class="GateOpener">
<div class="cover slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
Здесь будет ваш текст
</div></div>

Размер окошка с текстом соответствует размеру картинки - в коде я отметила размеры красным цветом. Если фото меньше или больше — меняйте на свои размеры. Не забывайте — ширину умножаем на 2, так как картинки две.

Синим выделила место, где будет ваш текст.

Зелёным выделила адрес первой и второй части картинки.

Голубым выделила цвет фона окна.

Так же можно поменять цвет тени окошка с текстом, цвет и ширину окантовки (border) и т.д.

А ниже ещё два варианта оформления этого кода. Это только фото.

Посмотреть в работе оформление можно на тестовом блоге - https://testbaryshyam.blogspot.com/2021/03/2.html

https://testbaryshyam.blogspot.com/2021/02/blog-post_28.html

Где можно использовать такое оформление? В статье или в качестве гаджета, для текстовой информации.

Оформление можно проверить на работоспособность в редакторе.