Create a personalized card featuring a captivating backdrop image

Hey everyone, I’m a newbie in the world of web development and I recently put together something using bootstrap 5. If you want to check it out, here’s the link to my project on CodePen.

I have a specific request though - instead of having icons displayed on the front of the card, I’d like to showcase images. And when the card is flipped, I want the content to remain intact, just like I’ve demonstrated in the CodePen link. Is there anyone who could help me achieve this?

Below is the CSS code I'm currently working with:

.services .icon-box {
  // Your CSS code goes here
}

// More CSS code...

And here is a snippet of the HTML code for reference:

<!-- Your HTML goes here -->

<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...</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...</p>
          </div>
        </div>
      </div>

      // More HTML snippets...
    </div>

  </div>
</section>

If you’re able to assist, thank you so much!

Answer №1

Take a look at this example to see the updated CSS-file at line 69 where your required CSS rules have been added:

.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);
}

 ... (code continues)
Flip-card styles and services section code are provided in the example.
Feel free to check it out and let us know if it meets your expectations.

If this answers your question, feel free to give it an upvote.

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

Retrieving data beyond an HTML form

Starting off my PHP page, there is a form with a save button. Beneath that, I display a list of items fetched from the database. Now, I want users to be able to select the items they desire by ticking them off. The issue I'm facing is that all the inf ...

Please explain the steps for creating a responsive grid layout

*{ margin: 0; margin-bottom: 200px; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } .grid-container { position:relative; display: inline-grid; grid-template-col ...

Extract words with specified tags from HTML using Python and return them as a list

Is there a simple way to parse HTML, extract the text, and generate a list of tags associated with each word or snippet of text? For instance, in the given HTML code: <em>Blah blah blah</em> blah again <i>and then again</i> The de ...

Generating an HTML table with JSON data in JavaScript

I'm still struggling with JavaScript as a beginner, so please bear with me and provide guidance step by step. Also, try to avoid overwhelming the comments with links as it confuses me. This is an attempt to bypass the CORS issue. <!D ...

What is the method for extracting text from a dd attribute without a name using Python and Selenium?

I am working on a webpage that includes a price listed in a dd value. Here is the snippet of code I am dealing with: <dd itemprop="youSave" class="saleprice pricingSummary-priceList-value" style="width: 50%; height: 20px; text-align: left; padding-le ...

Enhance the Search Box with a Vibrant Glow Effect When in Use

I need help adding a glow effect color around a search field when a user clicks on it to type. I want the border to have a shadow and the glow effect to be orange. I have included the CSS below, but I'm unsure of what to change or add. Any assistance ...

Tips for preserving scroll location on Angular components (not the window) when navigating

My current layout setup is like this: https://i.sstatic.net/hOTbe.png In essence <navbar/> <router-outlet/> The issue I'm facing is that the router-outlet has overflow: scroll, making it scrollable (just the outlet section, not the ent ...

HTML text/code ratio display tool

I need help finding a firefox/firebug plugin (or any OFFLINE tool is fine) that can show me the real text/markup ratio. While there are some online options available like and a Firefox plugin at https://addons.mozilla.org/en-US/firefox/addon/150366/ (whi ...

When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

In my next.js project, I have developed a Container component with specific styles. As I incorporate this container component throughout the site, I aim to assign it a className for context-based styling. Illustrated below is an example of the Container c ...

Steps to activate highlighting for the initial value in a quarterly datepicker

Concerning the quarterPicker feature in the Bootstrap datePicker (SO: how-to-change-bootstrap-datepicker-month-view-to-display-quarters, jsfiddle: jsFiddle): Is there a way to highlight an initial value upon startup? I have tried setting a value in win ...

``The issue concerning the preloading layer on the website``

My experience with the website www.wirecreation.net is sometimes marred by an issue during the initial load. It seems that there is a margin of a few pixels on the gray div containing the logo and progress bar at times, but other times it appears with zero ...

What exactly is the CSS element grouping operator?

I am investigating the concept of element grouping in CSS. Consider the following code snippet: .user-form .group-area .test, .user-form .group-area .test2{} Is it possible to group .test and .test2 elements together like this: .user-form .group-area (. ...

What is the best way to encode and split audio files so that there are no gaps or audio pops between segments when I put them back together?

In my current project, I'm developing a web application that involves streaming and synchronization of multiple audio files. To accomplish this, I am utilizing the Web Audio API in conjunction with HTML5 audio tags to ensure precise timing of the audi ...

Enhancing CSS with Additional Properties

As a web developer, I recently had the opportunity to explore the new LOGIN PAGE preview of GMAIL and was very impressed with the Sign In button's UI. After examining the Page's CSS, I discovered some interesting properties, such as: **backgroun ...

I need help getting rid of the unwanted text and objects that are appearing on my website

I recently designed a basic website and everything was running smoothly until I decided to insert a new ul division in the HTML page as a spacer between two elements: <div> <ul> <li><a></a></li> </u ...

How can you animate a MUI v4 Grid element using CSS transitions?

I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...

Utilizing HTML and jQuery to load a dynamic URL within a div placeholder

I'm experiencing some difficulty with loading a custom URL. Essentially, the user will click on a series of navigation links that will dynamically load the relevant content in a tabbed bootstrap jumbotron. The navigation links vary based on data store ...

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Within an HTML report, I have applied the style "overflow:auto" to allow for dynamic data filling. I am now facing the challenge of detecting whether a vertical scrollbar exists within the report. After scouring various forums for solutions, I came across ...

Implementing event handlers for each element by utilizing jQuery

Can you explain how I can effectively combine .on with .each? $('[id^="thing"]').each(???) For example, you can use: $("#button").on("click", function() { console.log(this.id) }) ...

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...