Completing the image in css

Question

I am making a symmetri webpage for my project. I used halve image and want its symmetry counterpart two also show on hovering. I mean that when we will hover on container, the image will get completed to reveal the full image. How do I achieve this.

#container {
  height: 300px;
  width: 241px;
  border: 1px solid red;
}
img {
  height: 300px;
  width: 120px;
  border-right: 1px dotted gray;
  display:inline-block;
  float:left;
}

<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
  <img src="http://i.imgur.com/qIPYs5i.jpg">
</div>

Duplicate of http://stackoverflow.com/questions/21635990/image-reflection-effect-using-pure-css — Christopher Esbrandt, Jan 12 '15 at 14:18
Simple option.... Don't half the image. Get the full image and put a div on top of the half the image. When you over the div hide it. — Ruddy, Jan 12 '15 at 14:18
possible duplicate of [Can you use CSS to mirror/flip text?](http://stackoverflow.com/questions/5406368/can-you-use-css-to-mirror-flip-text) — The Pragmatick, Jan 12 '15 at 14:20

score 0 · Answer 1 · answered Jan 12 '15 at 14:20

You can make a second class with the :hover keyword and set the background-image property to the complete image there.

Something like

#container:hover {
  height: 300px;
  width: 241px;
  border: 1px solid red;
  background-image: url('Your Image url')
}

should do the trick.

score 0 · Answer 2 · answered Jan 12 '15 at 14:21

You can use css3 transforms to mirror that image and then use the :hover pseudoclass to reveal it when the user hovers over the container:

#container {
  height: 300px;
  width: 242px;
  border: 1px solid red;
}
#container:hover .second{
    display: block;
}
img {
  height: 300px;
  width: 120px;
  border-right: 1px dotted gray;
  display: block;
  float:left;
}

.second {
    transform: scale(-1, 1);
    display: none;
}

<h1 style="font-family:Algerian;">Symmetry</h1>
<div id="container">
  <img class="first" src="http://i.imgur.com/qIPYs5i.jpg">
  <img class="second" src="http://i.imgur.com/qIPYs5i.jpg">
</div>

Did you ask a question just to comment with "Je suis Charlie"? This is not the place to do this kind of stuff, you're wasting everyone's time. — Jonas Grumann, Jan 12 '15 at 14:40

Completing the image in css

2 Answers2