how to do a mouse over in CSS: a hover-engine

sayhello_to_the_world · 07-05-2013, 10:30 AM

good day dear linux-experts.

well i currently try to iron out a way of css - rework of a existing
system:

i run joomla on the page http://maedchenhaus.org

on this page i have a image slider up and running. See the right-block. in this block there are some images visible..

so far so good: now i want to apply a special css:
note; i have had some firebug views on the system: and with that i saw that the we can apply a special kind of css.

see this one: http://www.cssplay.co.uk/menu/magnify.html

Magnify an image - see the three pictures

1.flower 3.animal and 3. bird

that is so cool I could we do that in css

http://www.cssplay.co.uk/menu/magnify.html

btw: can we do this like so:

I was thinking the script would be simular to this:

<img src="image.jpg" onmouseover="width='200px'" onmouseout="width='100px'''>

If it is possible can the image load up in another layer so it doesnt resize any content on the page

That would be most greatful - again; can we adopt this in Joomla?!

what do you think?

above all many thanks for sharin your ideas & thoughts

say

j-ray · 07-06-2013, 03:19 AM

Things like that you do with javascript. Does Joomla usually work with a js-library like jquery? You can see in the source code of the page, in the header section, whether it is loaded. If so take a look at their site and documentation. You can easily hook events to carry out tasks like changing css properties with it. Probably there is a plugin available that exactly fits to your needs.

cheers, j

added:

Quote:

If it is possible can the image load up in another layer so it doesnt resize any content on the page

You can use z-index property in css for this but only with position: absolute;

sayhello_to_the_world · 07-06-2013, 05:21 AM

hello dear J-ray

Quote:

Originally Posted by j-ray

Things like that you do with javascript. Does Joomla usually work with a js-library like jquery? You can see in the source code of the page, in the header section, whether it is loaded. If so take a look at their site and documentation. You can easily hook events to carry out tasks like changing css properties with it. Probably there is a plugin available that exactly fits to your needs.

cheers, j

many thanks for the quick reply i will dig deeper into that. And yes: i will have a closer look at the extension and plugin database over at extensions.joomla.org

btw: did you recongnize that this is doable within the template by havin a closer look at the it with FireBug!?
in other words: can FireBug help here - in developing a hover engine!?

cheers
say

j-ray · 07-07-2013, 04:27 AM

Firebug is a very helpful tool in general. You can google for magnifier examples like this one here:

http://cssdeck.com/labs/magnifying-g...query-and-css3

sayhello_to_the_world · 07-16-2013, 04:42 PM

hi there good day dear J-ray

many many thanks for the kind words - and the help. Well i like firebug very very much

Quote:

Originally Posted by j-ray

Firebug is a very helpful tool in general. You can google for magnifier examples like this one here:

http://cssdeck.com/labs/magnifying-g...query-and-css3

regarding the mouseover-thing. I guess there would be some way to "adopt" a method that runs as standalone into the Joomla framework, but really it is mostly just a CSS thing that we can add to our template stylesheet - over at http://www.maedchenhaus.org

Well J-Ray: Here is a very nice and quick and dirty example on codepen.io : http://www.codepen.io/jdwires/pen/skpby i like it alot!

We can do some minor changes: eg. 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. Again - we can see it in action on the codepen link above. see the
nice and quick and dirty example on codepen.io : http://www.codepen.io/jdwires/pen/skpby

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;
}

what do you say. I guess that i can apply this

j-ray · 07-17-2013, 02:58 AM

You can certainly apply that. If you are working with "position:absolute" you should test with InternetExplorer in general because IE often shows strange behaviours in this respect.

Instead of shifting the big image to the left for hiding it (position:absolute;left:-9999) you could set display:none for this and on hover display:block. But I don't know which version performs better.

Regards
J

sayhello_to_the_world · 07-18-2013, 02:06 AM

hello dear j-ray

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

PHP 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">

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.

regards say