How to change my hover effect with OnClick event

**mikamakela** · 12-02-2013, 09:03 AM

Hi folks,

i’m (still) coding my first responsive site with skeleton framework (http://testi3.aada.fi/aada_web/index.html).

Now site uses HOVER on my content pages to show info behind image. I want change this into ONCLICK event so that user must click image to see content behind it. How I do this?

Here’s css code that makes my hover work:

Code:

.view { display:inline-block; width: 100%; height: auto; margin-right: 0px; margin-bottom:20px; overflow: hidden; position: relative; text-align: center; box-shadow: 0px 3px 3px 0px #d3d3d3; cursor: default; background-color: #f0f0f0;

}

.view:last-child { margin-right: 0px; }

.view .mask, .view .content { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; right: 100%;

}

.view img { display: block; position: relative; }

.view h2 { font-family: ‘Arvo’, sans-serif; color: #fff; text-align: left; position: relative; font-size: 14px;

background: #c23b44;
margin: 20px 0 0 20px;
font-weight: bold;
line-height: 20px;

}

.view p { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px 20px; text-align: left; line-height: 18px; }

.view a.info { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; display: inline-block; text-decoration: none; padding: 7px 14px; background: #1eb8ff; color: #fff; box-shadow: 0 0 1px #1eb8ff; }

.view a.info:hover { box-shadow: 0 0 5px #1eb8ff; }

.view-portfolio img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio .mask { background-color: #00afff; -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio h2 { background: #00afff; color: #FFF; }

.view-portfolio p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); opacity: 0; color: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }

.view-portfolio:hover .mask { right: 0; }

.view-portfolio:hover img { margin-left: 100%; }

.view-portfolio:hover p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; }

and here’s HTML code of sample DIV:

HTML Code:

 <div>
 <div>
<img src="images/sparks_web.png" /> <div>
  Sparks ergonomics <p>
    Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.
  </p>

  <a href="http://www.sparkergonomics.com/fi/">Tutustu</a>
</div>

// Mika

**Beverleyh** · 12-02-2013, 09:52 AM

You've posted in the JavaScript forum which suggests that you know you need JavaScript to handle the hide/show behaviour of an element onclick, so what have you found and tried from your research on Google?

There are dozens of JavaScript hide/show tutorials on the web if you look for them - just searching on something like "hide show onclick with JavaScript" or "hide show toggle JavaScript" will bring up plenty of options for you to test and learn from.

Once you've tried a few things out, please feel free to come back and ask for further advice if you need it.

Also, a note about the CSS and HTML you've posted - they do not appear bear any relation to each other (where are the classes?). If you would like specific help, please post exactly what you're using to avoid confusion

**vwphillips** · 12-02-2013, 02:53 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.view img { display: block; position: relative; }

.view h2 { font-family: ‘Arvo’, sans-serif; color: #fff; text-align: left; position: relative; font-size: 14px;

background: #c23b44;
margin: 20px 0 0 20px;
font-weight: bold;
line-height: 20px;

}
.view-portfolio {
  position:relative;left:100px;top:100px;width:160px;height:380px;cursor:pointer;
}

.view p { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px 20px; text-align: left; line-height: 18px; }

.view a.info { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; display: inline-block; text-decoration: none; padding: 7px 14px; background: #1eb8ff; color: #fff; box-shadow: 0 0 1px #1eb8ff; }

.view a.info:hover { box-shadow: 0 0 5px #1eb8ff; }

.view-portfolio img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio .mask { background-color: #00afff; -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio h2 { background: #00afff; color: #FFF; }

.view-portfolio p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); opacity: 0; color: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }

.view-portfolio:hover .mask { right: 0; }

.view-portfolio:hover img { margin-left: 100%; }

.view-portfolio:hover p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; }
/*]]>*/
</style></head>

<body>
             <div class="view view-portfolio horizontal">
                    <img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
                    <div class="mask">
                        <h2>Sparks ergonomics</h2>
                        <p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
                        <a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
                    </div>
             </div>
             <div class="view view-portfolio vertical">
                    <img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
                    <div class="mask">
                        <h2>Sparks ergonomics</h2>
                        <p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
                        <a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
                    </div>
             </div>
<script type="text/javascript">
/*<![CDATA[*/
// Reveal Panel (02-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcRevealPanel={

 init:function(o){
  var clds=document.getElementsByTagName('DIV'),c,i,d,a=[],z0=0,z1=0;
  for (;z0<clds.length;z0++){
   c=clds[z0].className;
   i=clds[z0].getElementsByTagName('IMG')[0];
   d=clds[z0].getElementsByTagName('DIV')[0];
   if (((' '+c+' ').match(' '+o.ClassName+' '))&&i&&d){
    a.push({p:clds[z0],m:o.Slide,i:i,d:d,ms:o.Animate,t:o.EventType});
   }
  }
  for (;z1<a.length;z1++){
   this.ready(a[z1]);
  }
 },

 ready:function(o){
  var w=o.p.offsetWidth,h=o.p.offsetHeight,s=document.createElement('DIV'),m=typeof(o.m)=='string'?o.m.charAt(0).toUpperCase():'R',sz=(m=='U'||m=='D'?h:w)*(m=='L'||m=='U'?1:-1),m=m=='U'||m=='D'?['top','left']:['left','top'];
  s.style.position=o.d.style.position=o.i.style.position='absolute';
  o.d.style.width=o.i.style.width=w+'px';
  o.d.style.height=o.i.style.height=h+'px';
  s.style[m[0]]=o.i.style[m[0]]='0px';
  o.d.style[m[0]]=sz+'px';
  s.style[m[1]]=o.d.style[m[1]]=o.i.style[m[1]]='0px';
  s.appendChild(o.i);
  s.appendChild(o.d);
  o.p.appendChild(s);
  o.s=[s,m[0],-sz,0];
  o.ms=typeof(o.ms)=='number'&&o.ms>20?o.ms:1000;
  o.ud=false;
  o.p.style.overflow='hidden';
  this.addevt(o.p,o.t=='mouseup'||o.t=='mousedown'||o.t=='mouseover'?o.t:'click','slide',o,o.t=='mouseover'?true:null);
  o.t=='mouseover'?this.addevt(o.p,'mouseout','slide',o,false):null;
 },

 slide:function(o,ud){
  o.ud=typeof(ud)=='boolean'?ud:!o.ud;
  var t=o.ud?o.s[2]:0;
  this.animate(o,o.s,o.s[3],t,new Date(),o.ms*Math.abs((t-o.s[3])/o.s[2]));
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=Math.floor(n);
   a[0].style[a[1]]=a[3]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
  }
 },


 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

zxcRevealPanel.init({
 ClassName:'horizontal', // the common class name if the slide parent DIVs. (string)
 Slide:'right',              //(optional) the slide direction.                  (string, 'right', 'left', 'up', 'down', default = 'right')
 Animate:1000,               //(optional) the duration in millisec.             (number, default = 1000)
 EventType:'click'           //(optional) the event type to execute slide.      (string, 'click', 'mouseup', 'mousedown', 'mouseover', default = 'click')
})

zxcRevealPanel.init({
 ClassName:'vertical', // the common class name if the slide parent DIVs. (string)
 Slide:'down',              //(optional) the slide direction.                  (string, 'right', 'left', 'up', 'down', default = 'right')
 Animate:1000,               //(optional) the duration in millisec.             (number, default = 1000)
 EventType:'click'           //(optional) the event type to execute slide.      (string, 'click', 'mouseup', 'mousedown', 'mouseover', default = 'click')
})

/*]]>*/
</script>
</body>

</html>

**vwphillips** · 12-02-2013, 03:18 PM

or using options in the class name

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.view img { display: block; position: relative; }

.view h2 { font-family: ‘Arvo’, sans-serif; color: #fff; text-align: left; position: relative; font-size: 14px;

background: #c23b44;
margin: 20px 0 0 20px;
font-weight: bold;
line-height: 20px;

}
.view-portfolio {
  position:relative;left:100px;top:100px;width:160px;height:380px;cursor:pointer;
}

.view p { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px 20px; text-align: left; line-height: 18px; }

.view a.info { font-family: ‘Arvo’, sans-serif; font-style: normal; font-size: 12px; display: inline-block; text-decoration: none; padding: 7px 14px; background: #1eb8ff; color: #fff; box-shadow: 0 0 1px #1eb8ff; }

.view a.info:hover { box-shadow: 0 0 5px #1eb8ff; }

.view-portfolio img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio .mask { background-color: #00afff; -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.view-portfolio h2 { background: #00afff; color: #FFF; }

.view-portfolio p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”; filter: alpha(opacity=0); opacity: 0; color: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }

.view-portfolio:hover .mask { right: 0; }

.view-portfolio:hover img { margin-left: 100%; }

.view-portfolio:hover p { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”; filter: alpha(opacity=100); opacity: 1; }
/*]]>*/
</style></head>

<body>
             <div class="view view-portfolio Animate:500" >
                    <img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
                    <div class="mask">
                        <h2>Sparks ergonomics</h2>
                        <p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
                        <a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
                    </div>
             </div>
             <div class="view view-portfolio Slide:down EventType:mouseover" >
                    <img src="http://testi3.aada.fi/aada_web/images/sparks_web.png" class="scale-with-grid">
                    <div class="mask">
                        <h2>Sparks ergonomics</h2>
                        <p>Toteutimme sivustouudistuksen Concrete5 julkaisujärjestelmän päälle.</p>
                        <a href="http://www.sparkergonomics.com/fi/" target="_blank" class="info">Tutustu</a>
                    </div>
             </div>
<script type="text/javascript">
/*<![CDATA[*/
// Reveal Panel (02-December-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcRevealPanel={

 init:function(cls){
  var clds=document.getElementsByTagName('DIV'),o,c,i,d,a=[],z0=0,z0a,z1=0;
  for (;z0<clds.length;z0++){
   c=clds[z0].className;
   i=clds[z0].getElementsByTagName('IMG')[0];
   d=clds[z0].getElementsByTagName('DIV')[0];
   if (((' '+c+' ').match(' '+cls+' '))&&i&&d){
    o={p:clds[z0],i:i,d:d};
    c=c.split(' ');
    for (z0a=0;z0a<c.length;z0a++){
     i=c[z0a].indexOf(':');
     if (i>0){
      o[c[z0a].slice(0,i).toLowerCase()]=c[z0a].slice(i+1);
     }
    }
    a.push(o);
   }
  }
  for (;z1<a.length;z1++){
   this.ready(a[z1]);
  }
 },

 ready:function(o){
  var w=o.p.offsetWidth,h=o.p.offsetHeight,s=document.createElement('DIV'),m=typeof(o.slide)=='string'?o.slide.charAt(0).toUpperCase():'R',sz=(m=='U'||m=='D'?h:w)*(m=='L'||m=='U'?1:-1),m=m=='U'||m=='D'?['top','left']:['left','top'],ms=o.animate,t=o.eventtype;
  s.style.position=o.d.style.position=o.i.style.position='absolute';
  o.d.style.width=o.i.style.width=w+'px';
  o.d.style.height=o.i.style.height=h+'px';
  s.style[m[0]]=o.i.style[m[0]]='0px';
  o.d.style[m[0]]=sz+'px';
  s.style[m[1]]=o.d.style[m[1]]=o.i.style[m[1]]='0px';
  s.appendChild(o.i);
  s.appendChild(o.d);
  o.p.appendChild(s);
  o.s=[s,m[0],-sz,0];
  o.ms=isFinite(ms*1)&&ms>20?ms*1:1000;
  o.ud=false;
  o.p.style.overflow='hidden';
  this.addevt(o.p,t=='mouseup'||t=='mousedown'||t=='mouseover'?t:'click','slide',o,t=='mouseover'?true:null);
  t=='mouseover'?this.addevt(o.p,'mouseout','slide',o,false):null;
 },

 slide:function(o,ud){
  o.ud=typeof(ud)=='boolean'?ud:!o.ud;
  var t=o.ud?o.s[2]:0;
  this.animate(o,o.s,o.s[3],t,new Date(),o.ms*Math.abs((t-o.s[3])/o.s[2]));
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=Math.floor(n);
   a[0].style[a[1]]=a[3]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
  }
 },


 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

zxcRevealPanel.init('view') // the common class name if the slide parent DIVs. (string)

/*
 Class Name Options
  Slide:'right'              //(optional) the slide direction.             (string, 'right', 'left', 'up', 'down', default = 'right')
  Animate:1000               //(optional) the duration in millisec.        (number, default = 1000)
  EventType:'click'          //(optional) the event type to execute slide. (string, 'click', 'mouseup', 'mousedown', 'mouseover', default = 'click')

*/
/*]]>*/
</script>
</body>

</html>

Thread: How to change my hover effect with OnClick event

Thread Tools

Search Thread

How to change my hover effect with OnClick event

Similar Threads

Onclick event

Javascript onclick event to change an elements inline style?

Help w/ onClick event

Onclick event -> onload event

Adding an onClick event

Bookmarks

Bookmarks

Posting Permissions