foto html - css     . Cliparts - Foto met tekst 2

    Voorbeeld

   
topleft
topright
center
bottomleft
bottomright

In de css

.container {
position: relative;
width: 400px;}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;}
.vaag {
width: 400px;
height: auto;
opacity: 0.3;}
of:
.container {
position: relative;
width: 400px;}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;}
.vaag {
width: 400px;
height: auto;
opacity: 0.3;}
of:
.container {
position: relative;
width: 400px;}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;}
.vaag {
width: 400px;
height: auto;
opacity: 0.3;}
of:
.container {
position: relative;
width: 400px;}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;}
.vaag {
width: 400px;
height: auto;
opacity: 0.3;}
of:
.container {
position: relative;
width: 400px;}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;}
.vaag {
width: 400px;
height: auto;
opacity: 0.3;}

Tussen de bodytags

<div class="container">
<img src="jou clipart" width="400" height="300" class="vaag">
<div class="topleft">topleft</div>
</div>
of:
<div class="container">
<img src="jou clipart" width="400" height="300" class="vaag">
<div class="topright">topright</div>
</div>
of:
<div class="container">
<img src="jou clipart" width="400" height="300" class="vaag">
<div class="center">center</div>
</div>
of:
<div class="container">
<img src="jou clipart" width="400" height="300" class="vaag">
<div class="bottomleft">bottomleft</div>
</div>
of:
<div class="container">
<img src="jou clipart" width="400" height="300" class="vaag">
<div class="bottomright">bottomright</div>
</div>

end
terug
home