I have a image, I want to add some effects. Hover overlay div I was able to add it. Now what I want to do is to add onclick event and change to another overlay div.

Here is my code, or see the CodePen Here

  <div id="box">

  <div id="overlay">
    <span id="plus">+</span>
  </div>

CSS:

body    {  background:#e7e7e7;}
#box    {  width:300px;
           height:200px;
           float: left;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#plus       {  font-family:Helvetica;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:96px;  }

I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image div to appear a small div where will be placed a small description.

When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do.

In the image bellow you can see the blue div that should appear onclick event.

I have a image, I want to add some effects. Hover overlay div I was able to add it. Now what I want to do is to add onclick event and change to another overlay div.

Here is my code, or see the CodePen Here

  <div id="box">

  <div id="overlay">
    <span id="plus">+</span>
  </div>

CSS:

body    {  background:#e7e7e7;}
#box    {  width:300px;
           height:200px;
           float: left;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(http://ianfarb./wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}

#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;}

#box:hover #overlay {
               opacity:1;}

#plus       {  font-family:Helvetica;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:96px;  }

I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image div to appear a small div where will be placed a small description.

When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do.

In the image bellow you can see the blue div that should appear onclick event.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 29, 2014 at 15:31 user2672165 3,0492020 silver badges2929 bronze badges asked May 29, 2014 at 15:28 Valerxx22Valerxx22 81411 gold badge1414 silver badges3535 bronze badges 1

• What have you tried so far? Perhaps you could show us your JS/Jq efforts to date. Also you cannot re-use ID's as you have done in your Codepen. – Paulie_D Commented May 29, 2014 at 15:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Firstly, the image appears to be content so it should inline HTML and not a background image and I have proceeded on that basis.

Forked Codepen Demo

Revised HTML

<div class="box">
  <img src="http://ianfarb./wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
  <div class="overlay">
    <h1 class="plus"></h1>
  </div>
  <div class="description">
    <p>Lorem ipsum dolor.</p>
  </div>
</div>

CSS wise, I have taken advantage of absolute positioning, pseudo elements and a little CSS3 transform to get everything in place. The latter allows flexibility in changing some font-sizing choices for the +/- and border sizes of pseudo element (the arrow).

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box    {  
  width:300px;
  height:200px;
  box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
  border-bottom:2px solid #fff;
  border-right:2px solid #fff;
  margin:5% auto 0 auto; 
  border-radius:5px;
  overflow:hidden;
  position: relative;
}

.box img {
  display: block;
}

.overlay    {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,.75);
  text-align:center;
  opacity:0;
  -webkit-transition: opacity .25s ease;
}

.box:hover .overlay {
  opacity:1;
}

.overlay .plus:before { 
  content:"+";
  margin: 0;
  padding: 0;
  position: absolute;
  top:50%;
  left:50%;
  font-family:Helvetica;
  font-weight:900;
  color:rgba(255,255,255,.85);
  font-size:6rem;
  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}


.overlay.clicked .plus:before {
  content:"-";
}

.description {
  display: block;
  position: absolute;
  width:100%;
  height:30%;
  background-color: lightblue;
  bottom:-30%;
  text-align: center;
  transition: bottom 0.25s ease;
}

.description:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  left:50%;
  border-style:solid;
  border-color: transparent transparent lightblue transparent;
  border-width: 16px;
  top:0;
  -webkit-transform:translate(-50%, 100%);

}

.overlay.clicked + .description {
  bottom:0%;
}

.overlay.clicked + .description:after {
  -webkit-transform:translate(-50%, -100%);
}

Finally, a little JQuery to add a clicked (or active) interaction by way of .toggleClass.

Jquery

(function($) {
   $(".plus").click(function () { 
     $(this).parent().toggleClass("clicked");
    });  
})(jQuery);

use jquery

$(document).ready(function(){
  var trigger = $(".plus");
  var overlay = $(".overlay");

  trigger.click(function(){
     overlay.toggle('fast');
  })
});