CODEWITHSUNDEEP
cssanimation
qwertzuiop
qwertzuiop

Reputation: 735

CSS3 animation for moving an image and a div

I'm new with CSS3 animations and I encountered a litte problem trying to create a slide menu.

I have the following HTML code:

<div id="greenPart">
    <input type="checkbox" id="hackyCheckBox">
    <label for="hackyCheckBox">
        <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
    </label>
</div>

and this CSS code:

#hackyCheckBox{display: none;}

.test{
    height: 30px;
    width: 50px;
}

#greenPart{height: 100px; width: 300px; background-color: green;}

.test, #greenPart{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#hackyCheckBox:checked + label img.test{
    transform:         translate(160px,0px); /* CSS3 */
    -moz-transform:    translate(160px,0px); /* Firefox */
    -webkit-transform: translate(160px,0px); /* Webkit */
    -o-transform:      translate(160px,0px); /* Opera */
    -ms-transform:     translate(160px,0px); /* IE 9 */
}

My problem is when I click on the batman logo, only the logo moves, not the div. Here's the jsfiddle if it can help you: http://jsfiddle.net/1yLqzyjf/2/

Upvotes: 0

Views: 214

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Move the div#greenPart and img element inside label and use appropriate selector for that --> #hackyCheckBox:checked + label div#greenPart.

#hackyCheckBox {
  display: none;
}
.test {
  height: 30px;
  width: 50px;
}
#greenPart {
  height: 100px;
  width: 300px;
  background-color: green;
}
.test,
#greenPart {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -ms-transition-property: -ms-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}
#hackyCheckBox:checked + label div#greenPart {
  -webkit-transform: translate(160px, 0px);
  -ms-transform: translate(160px, 0px);
  transform: translate(160px, 0px);
}
<input type="checkbox" id="hackyCheckBox">
<label for="hackyCheckBox">
  <div id="greenPart">
    <img class="test" src="http://www.vectortemplates.com/raster/batman-logo-big.gif" />
  </div>
</label>

Upvotes: 1

Related Questions