add mouseover effects to joomla-template with live examples

Einfach Dinge, die nichts mit XAMPP, Apache Friends, Apache, MySQL, PHP und alle dem zu tun haben. Allerlei halt. ;)

add mouseover effects to joomla-template with live examples

Postby unleash » 18. July 2013 18:03

first of all many many thanks for the dj-image slider-


want to get some cool features for the dj-image-slider. - see them here

but really it is mostly just a CSS thing that we can add to the template stylesheet. Here is a quick example on codepen.io : http://www.codepen.io/jdwires/pen/skpby

Change the class names to something to better fit our needs. The basics are

Put thumbnail and large image onto page next to each other.
Wrap the two images in a link
Apply container style to link
Apply large style to large image


Below is the markup and CSS. See it in action on the codepen link above.

i try to apply the below mentioned code to the page. [ to get the same effectes on the page http://www.maedchenhaus.org ] - see the image in the dj-image-gallery.


Code: Select all
<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: Select all
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;
}


i will apply all and come back and report all findings

Again - many thanks!!

:)


update:

many thanks for the answer - and for encouraging me.

investigated it with FireBug and saw quite alot. ;-) Note FireBug is a tremendous tool that has got many many options - on a sidenote: i need to have some kind of manual.

i saw that have to tailor the layout.css


Code: Select all
<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">



and i certainly have to tweak a html-file in the template Ja_purity_II


well i dig deeper in the use of FireBug.

will come back and report all the findings.
unleash
 
Posts: 141
Joined: 03. December 2011 10:16
Operating System: OpenSuse Linux 12.1

Return to Allerlei

Who is online

Users browsing this forum: No registered users and 2 guests