How to change my hover effect with OnClick event

[mika]

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:

.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:

 <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

[Paulie_D]

The easiest thing to do would be to swap put the hover states for a class and the use jQuery’s addClass/removeClass functions to apply/remove it on a click.

[Author]

Posts