Оформление картинок до и после
О других вариантах оформления двух фотографий читайте здесь.
Оба варианта устанавливаются в статью в редакторе блога, в режиме html.
Код:
Красным размер картинок
Вариант 1
Потянув уголок фотографии за треугольничек внизу, открывается другая картинка.
<div class="image-slider">
<div>
<img height="367" src="адрес картинки 1" width="400" /></div>
<img height="335" src="адрес картинки 2" width="400" /></div>
<style>/
.image-slider {
position:relative;
display: inline-block;
line-height: 0;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 25px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 13px; height: 13px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
.image-slider img {
user-select: none;
max-width: 400px;
}</style>
Вариант 2
В коде можно изменить цвет рамки, размеры картинок, возможно, нужно будет подгонять.
Код:<div class="alfa" title="Название картинки 1">Оранжевым выделила цвет и размер рамки
<div class="bravo" title="Название картинки 2">
<textarea class="charly" cols="0" readonly="" rows="0"></textarea>
</div>
</div>
<style>.alfa {
background-image: url("картинка 1");
width: 600px;
height: 450px;
border: 20px solid #e28b00;
border-radius: 3px;
box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0,0,0,.2);
padding: 0;
margin: 1rem auto;
position: relative;
overflow: hidden;
}
.bravo {
background-image: url("картинка 2");
height: 450px;
resize: horizontal;
position: absolute;
top: 0; left: 0;
min-width: 0;
max-width: 600px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bravo:before {
content: '\2194';
background: rgba(0,0,0,.7);
font-size: 18px;
color: white;
top: 0; right: 0px;
hight: 100%;
line-height: 486px;
position: absolute;
}
.charly{
resize: horizontal;
opacity: 0;
position: relative;
top: 50%;
left: 0px;
margin-right: 0px;
width: 0px; height: 15px;
max-width: 600px; min-width: 15px;
outline: 0 solid transparent;
cursor: move;
cursor: all-scroll;
transform: scaley(35);
transform-origin: center center;
animation: delta 5s 1 normal ease-in-out 1s;
}
@keyframes delta {
30% {width: 500px}
60% {width: 150px}
80% {width: 250px}
}</style>
Красным размер картинок
Проверить работоспособность кодов можно в редакторе.
Комментарии со спамом удаляются.