Creating an interactive flip card using HTML and CSS

I am a beginner in HTML and I'm looking to create a specific element that flips. I have created this file.

However, when the first element is flipped (refer to the codepen), the content appears at the bottom (see image). Can someone assist me in ensuring that when the card is flipped, the content is displayed at the top instead of the bottom as shown in the picture?https://i.sstatic.net/MBIkf.png

.services .icon-box {
  text-align: center;
  border: 1px solid #e2eefd;
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: #f1f6fe;
  border-radius: 4px;
  border: 1px solid #deebfd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: ease-in-out 0.3s;
}

...
</pre>
<pre><code>  
<!-- CSS only -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<section id="services" class="services">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec aliquam metus, ac vehicula nibh. Nunc scelerisque tellus eu ullamcorper fermentum. Nam non condimentum lectus, vel dapibus leo. Integer elementum, elit id lacinia tempus, nisl augue accumsan est, nec lacinia libero eros non nulla. Pellentesque viverra eget lorem nec pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. .</p>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-6 d-flex align-items-stretch flip-card" data-aos="zoom-in" data-aos-delay="100">
            <div class="icon-box flip-card-inner" style="text-align: center;">
              <div class="flip-card-front">
                <div class="icon"><i class="bx bxl-dribbble"></i></div>
                <h4><a href="">Lorem</a></h4>
              </div>
              <div class="flip-card-back">
                <p>Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur.Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur.Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur.</p>
              </div>   
            </div>
          </div>

          <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0" data-aos="zoom-in" data-aos-delay="200">
            <div class="icon-box">
              <div class="icon"><i class="bx bx-file"></i></div>
              <h4><a href="">Lorem</a></h4>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</p>
            </div>
          </div>

          ...

        </div>

      </div>
    </section>

Thank you for your assistance!

htmlcssweb-deploymentbootstrap-5

Answer №1

The easiest method is to simply include translateY in the transform property...

.flip-card-back {
  color: black;
  transform: rotateY(180deg) translateY(-100%);
}

Answer №2

One simple solution is to use absolute positioning on the .flip-card-back element - see this example for reference: https://codepen.io/fromaline/pen/gOmxBGR?editors=0100

.flip-card-back {
  position: absolute;
  top: 50%;
  left: 50%;
  color: black;
  transform: rotateY(180deg) translateX(50%) translateY(-50%);
}

Answer №3

Check out this code snippet

I've included the following CSS rule: 

.align-items-stretch:hover .flip-card-front
with display: none;

.services .icon-box {
  text-align: center;
  border: 1px solid #e2eefd;
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
}

.services .icon-box .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: #f1f6fe;
  border-radius: 4px;
  border: 1px solid #deebfd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: ease-in-out 0.3s;
}

.services .icon-box .icon i {
  color: #3b8af2;
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .icon-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.services .icon-box h4 a {
  color: #222222;
  transition: ease-in-out 0.3s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  margin-top: 0;
}

.services .icon-box:hover {
  border-color: #fff;
  box-shadow: 0px 0 25px 0 rgba(16, 110, 234, 0.1);
}

.services .icon-box:hover h4 a,
.services .icon-box:hover .icon i {
  color: #106eea;
}

.services .icon-box:hover .icon {
  border-color: #106eea;
}

.flip-card {
  background-color: transparent;

  height: 337px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.align-items-stretch:hover .flip-card-front {
    display: none;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card-front,
.flip-card-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  color: black;
  transform: rotateY(180deg);

}

.flip-card:last-child {
  margin-bottom: 0;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0fee0ff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<section id="services" class="services">
      <div class="container" data-aos="fade-up">

        <div class="section-title">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec aliquam metus, ac vehicula nibh. Nunc scelerisque tellus eu ullamcorper fermentum. Nam non condimentum lectus, vel dapibus leo. Integer elementum, elit id lacinia tempus, nisl augue accumsan est, nec lacinia libero eros non nulla. Pellentesque viverra eget lorem nec pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. .</p>
        </div>

        ... (rest of the HTML content)
		
      </div>
    </section>

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

The issue with setting width using % in React Native is causing trouble

While working on my project using expo react native, I encountered an issue with a horizontal scrollview for images. When I style the images using pixels like this: <Image code... style={{width: 350}}/>, everything works fine. However, if I try to ch ...

javascriptcssreactjsreact-nativemobile

Issue with a input element having relative positioning within a flexbox

Objective: Aim to align the middle DIV (MIDDLE) within a flexbox row in the center. Issue: The right element includes an input element with relative positioning. Consequently, the middle DIV element (MIDDLE) is no longer centered but instead shifted to th ...

javascripthtmlcss

The nb-install mixin is not recognized

While working with angular5, I encountered the 'No mixin named nb-install' error when running npm start or serve Module build failed: undefined ^ No mixin named nb-install Backtrace: stdin:13 in E:\mrb_bugfixes& ...

cssangularscss-mixinsnebular

Toggle the visibility of the search Div using Angular UI

When using angular UI buttons, users can select search criteria by choosing between Patient, ID, or Date. If Patient or ID is selected, the searchByText div will be shown. If Date is selected, the searchByText will be hidden and the SearchBydateRange wil ...

javascriptjqueryhtmlcssangularjs

Bootstrap only allows for styling the border row and outside of a table

I'm looking to remove the vertical border of a table using bootstrap, except for the outside border as illustrated below. https://i.sstatic.net/RYq7o.png I've attempted to achieve this by: <table class="table no-footer worker-data tabl ...

htmlcssbootstrap-4

hyperlink to choose a specific option from a drop-down menu

The challenge I am currently working on involves page1.html <a href="/foo"></a> foo.html <select ng-model="ctrl.listvalues"> <option id="{{item.value}}" ng-repeat="item" in ctrl.availableValues" value="{{item.value}}">item.di ...

javascriptjqueryhtmlangularjs

associating the highlighted text with a specific attribute of the selectbox

Using my coding skills, I developed a small application that enables users to add text from a textarea to a div block. My goal is to prevent the appended text when the user clicks on the yellow div, and highlight the selected text properties (such as font ...

jqueryhtmljquery-ui

The CSS Grid extends vertically beyond its bounds, rather than activating the overflow-y property

Why does the grid blow out in the following snippet? The grid has a lime green border, each child has a dotted red border, and you can see the dotted red extends beyond the lime grid border. The .child2 should be made scrollable to prevent the grid from bl ...

css

``There seems to be an issue with the alignment and vertical placement in both Firefox and IE

I'm currently working on a responsive landing page for a company and running into an issue with the CTA button's position outside of Chrome. It's functioning perfectly in Chrome, resizing as intended: Here is the CSS responsible for this: ...

htmlcssresponsive-design

Determine the presence of a value within a specific column of an HTML table using jquery

When I input an ID number into a textbox, it shows me the corresponding location on a scale in another textbox. You can see an example of this functionality in action on this jsFiddle: http://jsfiddle.net/JoaoFelipePego/SdBBy/310/ If I enter a User ID num ...

javascriptjqueryhtml

Acknowledging client after client to server POST request has been successfully processed in Node.JS

I've been working on responding to client-side requests with Node.JS. While searching, I came across a helpful article on calling functions on the server from client-side JavaScript in Node JS. However, I'm having trouble implementing it in my pr ...

javascripthtmljquerynode.js

Tips for inserting a rotated image using CSS

I've created the following code snippet. However, there is a new requirement stating that the image needs to be rotated by 180 degrees. How can I make this happen? #cell { background-image: url("../images/logo.PNG"); background-attachment: fixed; b ...

htmlcss

Isolating the controls bar from the video content area within JWPlayer

Currently, I am utilizing JWPlayer for my video playback needs. I am curious if there is a method to separate the controls bar from the video content, similar to the design showcased in this link: https://i.sstatic.net/bZUA9.png Alternatively, are there a ...

htmlcssjwplayer

extract various information from a csv file

Having trouble reading items from a CSV file and adding them to an input form? When using a specific option value that allows you to add items by pressing comma, it doesn't work when reading from the .csv file. What could be causing this issue? with ...

htmlpython-3.xcsvflask

Transferring an object from one inventory to another

I'm in the process of developing a task manager that enables users to add and remove tasks. I am also working on enabling the ability for users to transfer tasks from one list to another. The current code I have written doesn't seem to be functio ...

javascripthtmlcssgoogle-chrome-extension

The CSS hamburger icon displayed in the browser features three bars of varying heights

Looking to create a hamburger icon menu using only CSS? Check out my implementation below which includes three span tags in the HTML document. .sidebar-toggle { display: inline-block; } .sidebar-toggle span { display: block; width: 1.5rem; heig ...

htmlcss

How can I adjust the indentation in Angular Prime-ng's p-tree component?

In my project, I am utilizing the primg-ng tree component for the sidebar. Currently, the output is displayed as shown here: https://i.stack.imgur.com/kcSQt.png However, I am looking to maintain consistent indentation levels without any adaptive changes ...

cssangularfrontendprimengprimeng-tree

Guide on implementing a looping settimeout function on a sliding page to dynamically load an HTML template within the Framework 7 framework

My current setup involves using Framework7 (framework7.io). The code below functions correctly on the main view page, utilizing a looping settimeout to refresh signups.html every second: <script type=“text/javascript” src=“code.jquery.com/jquery- ...

javascriptjqueryhtmlhtml-framework-7

Changing or toggling the visibility of links once the week is finished

I have a total of 4 links available, but I want to display only one link at a time, highlighting a different lunch option every week. Once all 4 weeks have passed, the first lunch menu will be shown again, starting from Monday. <div class="wrapper& ...

javascripthtmljqueryswitching

Summernote carries out encoded HTML scripts

Retrieving information from a MySQL database, the stored data appears as follows: <p>&lt;script&gt;alert('123');&lt;/script&gt;<br /></p> Upon fetching the data in its raw form, it displays like this: <script ...

htmljquerysummernote