Added hover effects for other document types

This commit is contained in:
Verena Schulz
2026-01-16 23:54:31 +01:00
parent b5d374498f
commit 826381d858
2 changed files with 79 additions and 1 deletions
+10 -1
View File
@@ -141,17 +141,26 @@
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatSummary1" value="agenda">
<label id="label_summary" for="docFormatSummary">Agenda</label>
<div class="figure2">
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
<img class="img-hover2" src="flags/india-flag-png-large.png">
</div>
</div>
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatSummary2" value="result-protocol">
<label id="label_summary" for="docFormatSummary">Resultprotocol</label>
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
<div class="figure3">
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
<img class="img-hover3" src="flags/united-kingdom-flag-png-large.jpg">
</div>
</div>
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatSummary3" value="sprint-planning">
<label id="label_summary" for="docFormatSummary">Sprint Planning Note</label>
<div class="figure4">
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
<img class="img-hover4" src="flags/germany-flag-png-large.jpg">
</div>
</div>
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatCustom" value="custom">
+69
View File
@@ -186,6 +186,8 @@ input[type="file"] {
gap: 5px;
}
/* Hover effects for all different document options (with placeholders)*/
.figure1 {
position: relative;
}
@@ -201,12 +203,79 @@ input[type="file"] {
object-fit: contain;
display: none;
transition: opacity .2s;
z-index: 999;
}
.figure1:hover .img-hover1 {
display: flex;
}
.figure2 {
position: relative;
}
.img-hover2 {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 40%;
left: 0;
bottom: 0;
object-fit: contain;
display: none;
transition: opacity .2s;
z-index: 999;
}
.figure2:hover .img-hover2 {
display: flex;
}
.figure3 {
position: relative;
}
.img-hover3 {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 40%;
left: 0;
bottom: 0;
object-fit: contain;
display: none;
transition: opacity .2s;
z-index: 999;
}
.figure3:hover .img-hover3 {
display: flex;
}
.figure4 {
position: relative;
}
.img-hover4 {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 40%;
left: 0;
bottom: 0;
object-fit: contain;
display: none;
transition: opacity .2s;
z-index: 999;
}
.figure4:hover .img-hover4 {
display: flex;
}
.img-icon {
width: 15px;
height: 15px;