tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/59313-verwendung-startseite-und-menpunkte-optisch-anpassenRockSolid Themes: Discussion 2020-11-03T09:41:13Ztag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-09-02T13:37:53Z2020-09-02T13:37:53ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Vielen Dank für Ihre Nachricht.</p>
<p>Ihre Frage betrifft eine individuelle Anpassung. In unseren <a href="https://rocksolidthemes.com/support-richtlinien">Support-Richtlinien</a> weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:</p>
<p>Sie können den Text innerhalb des Link-Elements als eigene Ebene einfügen und diese einblenden sobald die Maus über den Link fährt. Der HTML-Code dafür könnte z. B. folgendermaßen aussehen:</p>
<pre>
<code><a href="" class="bild-link">
<img ...>
<span class="bild-link-text">Text</span>
</a></code>
</pre>
<p>Mit dem dazugehörigen CSS:</p>
<pre>
<code>.bild-link {
display: block;
position: relative;
}
.bild-link > .bild-link-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.bild-link:hover > .bild-link-text {
opacity: 1;
}</code>
</pre>
<p>Einen ähnlichen Effekt finden Sie in unserem Theme Oneo bei den Portfolio-Boxen: <a href="https://demo.rocksolidthemes.com/contao/oneo/portfolio">https://demo.rocksolidthemes.com/contao/oneo/portfolio</a></p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-09-02T13:56:57Z2020-09-03T06:23:50ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Perfekt und vielen Dank für die superschnelle Antwort!<br>
Eine Frage noch:<br>
Wenn ich beim hovern ein anderes Bild anzeigen möchte, wie müsste der Code dann aussehen?</p></div>Bernhard Teppantag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-09-03T06:25:10Z2020-09-03T06:25:10ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Anstatt des <code><span></code>-Tags könnten Sie z. B. einen zweiten <code><img></code>-Tag verwenden.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-09-03T07:47:58Z2020-09-03T07:54:58ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Alles klar! Vielen Dank!</p></div>Bernhard Teppantag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-11-02T17:38:17Z2020-11-02T17:38:20ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Hallo!<br>
Darf ich meine Anfrage um eine weitere Option ergänzen:<br>
Auf Smartphones werden derzeit die Bilder angezeigt und da es ja hier keine Maus zum hoovern gibt, wäre es sinnvoll auch oder nur den Text anzuzeigen. Ich vermute das geht mit einer @media screen-Anweisung.<br>
Wie müsste diese sinngemäß lauten?<br>
Vorweg schon vielen Dank für ihre Unterstützung!</p></div>Bernhardtag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-11-03T09:05:50Z2020-11-03T09:05:50ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Vielen Dank für Ihre Frage.</p>
<p>Dafür können Sie z. B. folgenden CSS-Code verwenden:</p>
<pre>
<code>@media (hover: none) {
.bild-link > .bild-link-bild {
opacity: 0.95;
transition: 0.5s;
color: #e64415;
font-size: 2.5em;
background-color: #fffaed;
display: flex;
align-items: center;
justify-content: center;
}
}</code>
</pre>
<p>Der Media-Query <code>(hover: none)</code> ist für Browser aktiv deren primäres Eingabegerät keine Hover-Funktionalität unterstützt.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/485974242020-11-03T09:16:25Z2020-11-03T09:41:11ZVerwendung: Startseite und Menüpunkte optisch anpassen<div><p>Super! Vielen Dank für die Information!!</p></div>Bernhard Teppan