CODEWITHSUNDEEP
csshtml
Mohamed Ali
Mohamed Ali

Reputation: 782

flipping images using css

I have a group of images and what I want is to be able to flip the image. For the front of the image it will show numbers(see image below) and on the back it will have a picture. If the user clicks another image and it matches the first picture clicked, then it will disappear after a couple of seconds. Right now I am stuck on getting the images to flip. I will paste my html code and css down below.

To make the image flip I tried using the hover effect but this did not work either 

 #flipper:hover {
            transform: rotateY(180deg);
        }

enter image description here

body {
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

h2 {
  text-align: center;
}

body {
  background-color: white;
}

img {
  width: 30%;
  float: left;
  margin: 1.66%;
}

p {
  margin-left: 1.66%;
  font-family: "Contrail One", cursive;
  font-size: 35px;
  text-transform: uppercase;
  border-bottom: 2px solid black;
  width: 30%;
  padding-bottom: 20px;
}

div.a {
  text-align: center;
  font-family: sans-serif;
}

#flipper:hover {
  transform: rotateY(180deg);
}
<link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">


<div id="flipper">

  <img class="flip" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">
  <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="">

  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg " alt="">

  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">
  <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg " alt="">

  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">
  <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg " alt="">

</div>

Upvotes: 1

Views: 868

Answers (1)

Robster
Robster

Reputation: 222

I think to start off, i couldnt tell if you had already linked your written CSS to your HTML. I see only 1 link and its not to your css. Looks like a google font.

I created a https://codepen.io/robert9111/pen/MzabWZ

    <!-- HTML -->
   <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
        <img class="size" src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg/">
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>
    <!-- CSS -->
  #f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}

.size {
  width: 450px;
  height: 281px;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

for you to check out. I think this may solve your issue.

I didn't do them all as I think it would be good for you to write out some of that code.

Upvotes: 1

Related Questions