Implemented hover effect

This commit is contained in:
Verena Schulz
2026-01-14 19:04:27 +01:00
parent bef9c44a2f
commit 66762b8251
3 changed files with 34 additions and 1 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

+7
View File
@@ -133,18 +133,25 @@
<div class="checkbox-container">
<input type="checkbox" name ="docFormat" id="docFormat" value="followup-report">
<label id="label_format" for="docFormat">Follow-up Report</label>
<div class="figure1">
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
<img class="img-hover1" src="flags/germany-flag-png-large.jpg">
</div>
</div>
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatSummary1" value="agenda">
<label id="label_summary" for="docFormatSummary">Agenda</label>
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
</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>
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatSummary3" value="sprint-planning">
<label id="label_summary" for="docFormatSummary">Sprint Planning Note</label>
<img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png">
</div>
<div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatCustom" value="custom">
+27 -1
View File
@@ -186,6 +186,31 @@ input[type="file"] {
gap: 5px;
}
.figure1 {
position: relative;
}
.img-hover1 {
position: absolute;
width: 200px;
height: 200px;
top: 0;
right: 40%;
left: 0;
bottom: 0;
object-fit: contain;
display: none;
transition: opacity .2s;
}
.figure1:hover .img-hover1 {
display: flex;
}
.img-icon {
width: 15px;
height: 15px;
}
.submit-btn {
display: flex;
@@ -308,7 +333,8 @@ input[type="file"] {
/*panels*/
.step {
margin-top: 40px;
margin-bottom: 40px;;
margin-bottom: 40px;
;
display: flex;
flex-direction: column;
min-height: 425px;