Spawnsplitter
Mitglied
Hey Leute und zwar habe ich eine Frage, aktuell programmiere ich eine Website für einen Kunden. Ich habe geplant ein Hotspot Element zu verwenden und den Marker per Keyframes zu animieren. Mein Problem liegt nun darin das eben nicht nur der Marker animiert wird, sondern auch direkt der Tooltip mit, was nicht gewollt ist. Ich habe schon animation: none etc ausprobiert doch nichts führt zu dem Ergebnis das Ich möchte. Vielleicht habt Ihr ja einen Tipp für mich
HTML:
<div class="Hotspots">
<div class="HotspotsEinleitung">
<h3>Wohlfühlfaktor wie daheim</h3>
<p>Von rustikal, über klassisch bis hin zu Winestyle und exklusivem Charme erfüllen unsere Häuser alle Ansprüche und Wünsche verschiedener Geschmäcker.</p>
<button class="btnHotspot">Jetzt Buchen</button>
</div>
<div class="image-container-map">
<img src="./Bilder/webp/karte_2.webp" alt="Karte" width="100%" height="auto">
<a href="#" class="hotspot" style="top: 30%; left: 20%;" data-tooltip="Weingarten" aria-label="Weingarten"></a>
<a href="#" class="hotspot" style="top: 30%; left: 35%;" data-tooltip="Gästehaus am Marktplatz" aria-label="Gästehaus am Marktplatz"></a>
<a href="#" class="hotspot" style="top: 37%; left: 39%;" data-tooltip="Stammhaus Zeltinger-Hof" aria-label="Stammhaus Zeltinger-Hof"></a>
<a href="#" class="hotspot" style="top: 42%; left: 37%;" data-tooltip="Winzerhaus" aria-label="Winzerhaus"></a>
<a href="#" class="hotspot" style="top: 42%; left: 40%;" data-tooltip="Alte Kellerei" aria-label="Alte Kellerei"></a>
<a href="#" class="hotspot" style="top: 49%; left: 43%;" data-tooltip="Gästehaus Weinkabinett" aria-label="Gästehaus Weinkabinett"></a>
<a href="#" class="hotspot" style="top: 47%; left: 61%;" data-tooltip="Ratsschänke Kinkerlitzche - Tapas & Wine by Reis" aria-label="Ratsschänke Kinkerlitsche"></a>
</div>
</div>
CSS:
.Hotspots {
display: flex;
flex-wrap: wrap;
padding: 5px 5px 5px 5px;
word-wrap: break-word;
}
@media (min-width: 768px) {
.Hotspots {
display: flex;
flex-wrap: nowrap;
padding-top: 150px;
}
}
.Hotspots h3 {
font-size: 1.8em;
padding-left: 10px;
}
.Hotspots p {
line-height: 1.4em;
font-weight: bold;
padding-left: 10px;
font-family: 'Effra Refular';
}
.btnHotspot {
display: block;
margin-top: 30px;
padding: 15px 23px 15px 23px;
margin-left: 10px;
margin-bottom: 25px;
font-size: 0.8em;
background-color: #455659;
color: #fff;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
border: solid 1px;
}
@keyframes pulsate {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0 ,0 );
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 0, 0 ,0);
}
}
.HotspotsEinleitung {
line-height: 2.6em;
position: relative;
padding-right: 10px;
}
.HotspotsEinleitung p {
font-weight: bolder;
font-family: 'effra regular';
}
@media (min-width: 768px) {
.HotspotsEinleitung {
width: 15%;
line-height: 1.3;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 150px;
padding-right: 50px;
}
}
@media (min-width: 768px) {
.HotspotsEinleitung button {
width: 70%;
}
}
@media (min-width: 768px) {
.HotspotsEinleitung h3 {
font-size: 2.625rem;
}
}
@media (min-width: 768px) {
.HotspotsEinleitung p {
font-size: 1.1rem;
font-weight: bold;
margin-top: -20px;
}
}
.image-container-map {
position: relative;
width: 100%;
object-fit: cover;
}
.image-container-map a {
animation: pulsate 2.5s ease-out;
animation-iteration-count: infinite;
}
.image-container-map img {
width: 100%;
}
.hotspot {
width: 25px;
height: 25px;
position: absolute;
display: block;
border-radius: 50%;
background-color: #45575A;
}
.hotspot:hover::after {
content: attr(data-tooltip);
position: absolute;
width: 120px;
padding: 28px;
font-size: 12px;
color: black;
background-color: #E4E4E6;
border-radius: 5px;
text-align: center;
z-index: 9999;
text-transform: uppercase;
font-weight: 900;
font-family: "Effra Regular";
}