Halli hallo Joomla-Freunde in der Schweiz,
wollte schon immer mal einen Mouse-Over-Effekt selber machen.
ich bin soeben dabei ein paar spezielle Effekte auf der Seite
www.maedchenhaus.org
hinzubekommen - insbesondere wenn man auf den linken Block blickt die dj-image-gallery
Nebenbei - ich find die Gallery echt super! Die leistet total viel.
will jetzt aber noch groessere Bilder sichtbar machen - mit mouseover. Geht das denn!?
Denke ja: Es müsste mit Tooltips gehen.
hier gibt es nebenbei auch noch ein paar do-it-yourself-methoden
www.dynamicdrive.com/dynamicindex4/imagetooltip.htm
or
www.dyn-web.com/code/tooltips/
But I would look into some joomla extensions.
extensions.joomla.org/extensions/photos-...articles-images/6245
extensions.joomla.org/extensions/photos-...articles-images/6105
Es gibt aber noch einen weiteren Weg:
www.codepen.io/jdwires/pen/skpby
Das ist ein echtes Superbeispiel - wie ich finde!
man kann ein thumbnail u. ein gr. image auf einer Seite direkt nebeneinander bringen
die beiden Bilder in einem Link verbinden
den link einbauen
grossen Stil dem grossen image zufügen..
Code:
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/150x150/ddf" alt="">
<img class="large-thumbnail-style" src="http://placehold.it/250x250/ddf" alt="">
</a>
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/150x150/fdd" alt="">
<img class="large-thumbnail-style" src="http://placehold.it/250x250/fdd" alt="">
</a>
<a class="mouseover-thumbnail-holder">
<img src="http://placehold.it/150x150/dfd" alt="">
<img class="large-thumbnail-style" src="http://placehold.it/250x250/dfd" alt="">
</a>
Code:
a.mouseover-thumbnail-holder {
position:relative;
display:block;
float:left;
margin-right:10px;
}
.large-thumbnail-style {
display:block;
border:10px solid #fff;
box-shadow:0px 0px 5px #aaa;
}
a.mouseover-thumbnail-holder .large-thumbnail-style {
position:absolute;
top:0;
left:-9999px;
z-index:1;
opacity: 0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
top:0;
left:105%;
z-index:1;
opacity:1;
}
was meint ihr denn.
freu mich auf einen Tipp.
vg gibraltar
denk mal dass ich da eingreifen muss iin das layxout.css des template - und dann noch in einen html-file.
Code:
<ul id="slider37" style="position: relative; width: 400px;">
<li style="position: absolute; top: 0px; left: 0px; visibility: visible; opacity: 1;">
<img alt="g_one1" src="/images/stories/girls_one/m_vignette_hans-on-experience_4545166211_.jpg">
<div class="slide-desc">
</li>
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<li style="position: absolute; top: 0px; left: 0px; visibility: hidden; opacity: 0;">
<img alt="gone_3" src="/images/stories/girls_one/m_vignette_gamergirls_4585918045_.jpg">
<div class="slide-desc">
