Hoe OM - Knoppie op Beeld
Leer hoe om 'n knoppie by 'n prent met CSS te voeg.
Knoppie op Beeld
Hoe om knoppie oor prent by te voeg
Stap 1) Voeg HTML by:
Voorbeeld
<div class="container">
<img src="img_snow.jpg" alt="Snow">
<button class="btn">Button</button>
</div>
Stap 2) Voeg CSS by:
Voorbeeld
/* Container needed to position the button. Adjust the width as needed */
.container {
position: relative;
width:
50%;
}
/* Make the
image responsive */
.container img {
width: 100%;
height: auto;
}
/* Style the button and place it in the middle of
the container/image */
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}