0

So i have an image and instead of having it rotate by using:hover, i would like to place a button to the side that when clicked will rotate that image. For example an image of a shirt on an online store, i would like for there to be a button that rotates that image so the back can be displayed.

Ted
  • 14,757
  • 2
  • 41
  • 58
J. E.
  • 29
  • 1
  • 4
  • 3
    Are you familiar with JavaScript? This really is a JS question. You may be interested in [Using an html button to call a javascript function](http://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function) – gfullam May 11 '15 at 13:54
  • 1
    Also see the accepted answer here: [Programmatically change the src of an img tag](http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) – gfullam May 11 '15 at 13:57
  • 2
    And if you insist on not using JavaScript, look at :target but there will be a lot of limitations – Francis Nepomuceno May 11 '15 at 13:58
  • Unfortunately, too, your question fails to demonstrate an research efforts you made. Because you're new here, you may want to read this StackOverflow help article: "[How do I ask a good question?](http://stackoverflow.com/help/how-to-ask)" Welcome, by the way. :) – gfullam May 11 '15 at 13:59

1 Answers1

1

Depending on your markup structure, it is possible to do purely with CSS.

Here's one such method using the :checked property of a checkbox Run the snippet to see how it works:

.checkme{
    display:none;
}
.checkme + label{
    cursor:pointer;
    background:#efefef;
    padding:4px 8px;
    margin-bottom:5px;
}

.checkme + label > .back{
    display:none;
}
.checkme:checked + label > .front{
    display:none;
}
.checkme:checked + label > .back{
    display:inline;
}

.checkme + label + .imgbox{
    width:150px;
    height:150px;
    background-image:url("http://www.placehold.it/150x150");
}
.checkme:checked + label + .imgbox{
    background-image:url("http://www.placehold.it/149x149");
}
<input id="foo" class="checkme" type="checkbox"/>
<label for="foo">
    <span class="front">Show Back</span>
    <span class="back">Show Front</span>
</label>
<div class="imgbox">
Ted
  • 14,757
  • 2
  • 41
  • 58
  • 1
    This is an impressive solution, but it doesn't demonstrate a common approach and makes use of the checkbox in an unconventional way. It is really clever, but likely unnecessary and potentially confusing for a novice developer. – gfullam May 11 '15 at 14:52
  • @gfullam I won't argue that, and agree a javascript/jquery solution would be a better and simpler route (hint hint OP), but until the _OP_ solicits such solutions, I'll stick to the languages they ask for. ( In the meantime, have a few upvotes :) ) – Ted May 11 '15 at 16:38
  • Fair enough, but sometimes people don't know what to ask for and the community can help steer them in the right direction. – gfullam May 11 '15 at 16:40