104 lines
2.0 KiB
HTML
104 lines
2.0 KiB
HTML
|
<html>
|
||
|
|
<style>
|
||
|
|
.wishes {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-block img {
|
||
|
|
width: 300px;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
.image-block {
|
||
|
|
width: 1000px; /*100px фоточки по три в ряд*/
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-block .image input {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-block:has(.image input:checked)
|
||
|
|
.image:has(input:not(:checked)) {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.image-block .image:has(input:checked) img {
|
||
|
|
position: absolute;
|
||
|
|
top: 150px;
|
||
|
|
left: 300px;
|
||
|
|
width: 400px;
|
||
|
|
height: auto;
|
||
|
|
z-index:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* other image */
|
||
|
|
|
||
|
|
.image-block:has(.image input:checked)
|
||
|
|
.image:has(input:not(:checked))
|
||
|
|
img {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<div class="wishes">
|
||
|
|
<div>
|
||
|
|
<h2>for functionality</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Add drag n drop
|
||
|
|
<br>(full page is a drop space)</li>
|
||
|
|
<li>Add add tags</li>
|
||
|
|
<li>Add "search" (tag/tags)</li>
|
||
|
|
<li>Add pick up a photo</li>
|
||
|
|
<li>...</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2>for style</h2>
|
||
|
|
<ul>
|
||
|
|
<li>Gallery w 5-6 photos (flex w size) in a row,
|
||
|
|
<br>wich is nice to scroll down</li>
|
||
|
|
<li>Arrows to see next/prev photo</li>
|
||
|
|
<li>Fantom next/prev photos on the background</li>
|
||
|
|
<li>...</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="image-block">
|
||
|
|
|
||
|
|
|
||
|
|
<label class="image">
|
||
|
|
<input type="checkbox">
|
||
|
|
<img src="images/1.JPG">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="image">
|
||
|
|
<input type="checkbox">
|
||
|
|
<img src="images/2.JPG">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="image">
|
||
|
|
<input type="checkbox">
|
||
|
|
<img src="images/3.JPG">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="image">
|
||
|
|
<input type="checkbox">
|
||
|
|
<img src="images/4.JPG">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="image">
|
||
|
|
<input type="checkbox">
|
||
|
|
<img src="images/5.JPG">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="image">
|
||
|
|
<input type="checkbox">
|
||
|
|
<img src="images/6.JPG">
|
||
|
|
</label>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|