マウスを画像の上に置くと、画像の上に小さなアイコンが表示されるというアイデアで座って遊んでいます。私はこのようにしようとしました：
HTML:
<figure>
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;">
<img src="/indhold/img/sog/sog.png" class="iconIMG">
<p><?php echo date("d-m-Y", strtotime($dag));;?></p>
</div>
</figure>
CSS:
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.lukIMG .iconIMG { position: absolute; display: none; }
EIDT HTML と CSS:
HTML
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;" class="cl1">
<img src="/indhold/img/sog/loading.gif" class="cl2" width="25px;" height="25px;">
<p>dato</p>
</div>
CSS
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.cl1:hover+img
{
position:absolute;
left:0;
top:0;
z-index:3;
}
.cl1
{
z-index:2;
}
.cl2
{
z-index:1;
}