Rehe_im_Wald

by Rolf

HTML

<h1>Rehe im Wald</h1>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/NSG_Landschaft_um_den_Heppenstein_2023b.jpg/640px-NSG_Landschaft_um_den_Heppenstein_2023b.jpg" alt="lichter Wald mit Gras">
<a class="does" href="https://de.wikipedia.org/wiki/Reh">
  <img src="https://wiki.selfhtml.org/images/5/53/Rehe.png">
</a>
</figure>

Quellen:
<ul>
<li><a href="https://commons.wikimedia.org/wiki/File:Reh_IMG_6811.jpg">Rehe</a> - von mir freigestellt</li>
<li><a href="https://commons.wikimedia.org/wiki/File:NSG_Landschaft_um_den_Heppenstein_2023b.jpg">Waldlandschaft</a></li>
</ul>

CSS

figure {
  position:relative;
  margin: 0;
}
.does {
  width: 150px;
  position: absolute;
  top: 180px; left: 120px;
  transition-duration: 1s;
  transition-property: opacity, filter;
}
a.does > img { width:100%; }

.does {
  opacity: 0.5;
  filter: grayscale(1);
  z-index: 2;
}
.does:is(:hover,:focus) {
  opacity: 1;
  filter: grayscale(0);
}