revealing the hidden message on the back of the card

I have been working on creating flipping cards for my website using CSS, but I am facing an issue. Even after styling my cards as per the provided CSS code, I am unable to make them flip when I hover my mouse over them.

.row {
  padding-top: 25px;
}

.card {
  display: block;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #E0E0E0s;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: box-shadow .25s;
  border-right: 100%;
}

.card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.img-card {
  width: 100%;
  height: 200px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  display: block;
  overflow: hidden;
}

.img-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: all .25s ease;
}

.card-content {
  padding: 15px;
  text-align: left;
}

.card-title {
  margin-top: 0px;
  font-weight: 700;
  font-size: 1.65em;
}

.card-title a {
  color: #000;
  text-decoration: none !important;
}

.card-read-more {
  border-top: 1px solid #D4D4D4;
}

.card-read-more a {
  text-decoration: none !important;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase
}
<div class="col-xs-12 col-sm-4">
  <div class="card">
    <a class="img-card" href="http://www.fostrap.com/">
      <img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" />
    </a>
    <br />
    <div class="card-content">
      <h4 class="card-title">
        <a href="http://www.fostrap.com/">
                            BMW X5 SERIES
                        </a>
      </h4>
      <div class="">
        New Delhi, 2005, Petrol
      </div>
    </div>
    <div class="card-read-more">
      <a class="btn btn-link btn-block" href="http://www.fostrap.com/">
                        BID NOW
                    </a>
    </div>
  </div>
</div>

After trying to add a hover class without success, I am seeking help to understand which class will allow me to achieve the desired flipping effect. Thank you.

htmlcssbootstrap-4

Answer №1

#f1_container {
  position: relative;
  width: 450px;
  height: 281px;
  z-index: 1;
}

#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 {
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
}
<div class="col-xs-12 col-sm-4">
  <div id="f1_container">

    <div class="card">

      <div id="f1_card" class="shadow">
        <div class="front face">
          <a class="img-card" href="http://www.fostrap.com/">
            <img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" />
          </a>
          <br />
          <a href="http://www.fostrap.com/">
                            BMW X5 SERIES
                        </a> New Delhi, 2005, Petrol
          </h4>
          <a class="btn btn-link btn-block" href="http://www.fostrap.com/">
                        BID NOW
                    </a>

        </div>

        <div class="back face center">
          <a class="img-card" href="http://www.fostrap.com/">
            <img src="https://images.pexels.com/photos/112460/pexels-photo-112460.jpeg?auto=compress&cs=tinysrgb&h=350" />
          </a>
        </div>
      </div>
    </div>



  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

it will still function properly regardless of the width being set to zero

Is anyone able to explain the strange phenomenon I am experiencing with this code snippet? In this particular example, I have set the width of selector h3 to 0. However, when viewing it in IE 9 using F12 development tools, I can see that the width is indee ...

htmlcss

Ways to extract information from PayFast

One issue I'm facing with my online store is that although PayFast does call my notify_url, it appears that no data is being posted. Below are the codes I've been using: Code for purchasing: <button id="cCart" type="submit" class="bt ...

javascriptphphtml

Guide to altering the color of a list item when hovering in HTML

Is there a way to change the color of the <li> element only when hovering over it, without affecting its parent or child elements? Here is an example: HTML: <div id="tree"> <ul> <li>apple</li> <li>banana</l ...

javascriptjqueryhtmlcss

New HTML5 feature enables users to upload images onto canvas, enabling them to drag, rotate, and even

I'm a beginner in Html5 and I'm having trouble with uploading an image to the canvas. When I provide the direct source of the image, it works fine. I referred to this link for help javascript: upload image file and draw it into a canvas. Let me s ...

jqueryhtmlimagecanvas

Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right. I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within th ...

htmlcssvertical-alignmentnav

What is the best method to assign jQuery to individual Bootstrap Modals within Thymeleaf?

I am facing the following situation, <script> $(document).ready(function (){ $("#inputText").hide(); $("#checkboxId").click(function (){ $("#div1").toggle("slow" ...

jqueryspringbootstrap-4thymeleafbootstrap-modal

Display scroll bars over the position:absolute header

My container has content that exceeds its size in both directions. To see the issue, try scrolling horizontally and vertically on the table available here: The vertical scrollbar is visible as desired, except that it gets hidden behind the table header un ...

javascriptcssreactjs

What is the best way to implement a loading cursor when the Submit button is clicked?

Is there a way to incorporate a progress cursor into my code in order to notify the user to wait when they click the Submit button or the Upload Button while uploading multiple files? Below is an example of my form: <form action="" method="post" enct ...

javascriptjquerycsshtmlforms

CSS3 Animation displaying text color change on various elements in a continuous loop

I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...

htmlcssreactjs

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

htmlcss

html issue with the footer

Just starting out with HTML and encountering some difficulties with adding a footer. The main issue is that when I add the footer, the 'form' element gets stretched all the way down until it reaches the footer - you can see an example of this her ...

htmlcssstylesheet

Make HTML design responsive to any screen size

After completing the design of a mobile app interface with dimensions 750w by 1334H, I encountered an issue where it appears too large on the app testing screen. I am seeking a way to automatically adjust the design to fit all screens without compromising ...

htmlcss

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

To ensure proper display, the canvas should be set to display block when its width is 100vw and height is 100vh

Can anyone explain why I need to include display: block when my canvas is full page? Without it, the canvas size appears larger even though the width and height values are the same. Appreciate any insights. Thanks! ...

htmlcss

Navigating to a different page in Ionic 2 when a link or button is clicked

When I click on the link provided below, it should take me to the home page. However, I am facing issues and it is not redirecting me as expected. I want to be taken to the home page when clicking on the specified link or button. Do I need to add any Ang ...

htmlangularionic2

Drop and drag the spotlight

On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area. I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't se ...

javascriptjqueryhtmlcss

Javascript program that generates drag and drop elements using HTML5 features:

Whenever I attempt to drag and drop elements that are normally created by HTML, everything works fine. However, when I try to drag and drop elements generated by JavaScript, I encounter the following error: Uncaught TypeError: Cannot read property 'p ...

javascripthtmldrag-and-dropgenerated

Reset the button is behaving in the same way as the submit button

I'm having an issue with the script below where the reset button is acting like a submit button as well. Can anyone help me troubleshoot this problem? Thank you. HTML <input type="image" name="submit" value=" " src="image.png"> <input t ...

htmlbuttonsubmitreset

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

Customizing a toggle checkbox in Bootstrap 5: A guide to personalization

I am attempting to modify a toggle switch in Bootstrap 5.2. <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <meta http-equiv="X-UA-Compatible" content="IE=edge> <meta name="viewport" content="wid ...

htmlcsstwitter-bootstrapcheckboxbootstrap-5