Html flipcard malfunctioning and logo overlapping issue detected

Regarding the following code:

<html>
<style>

.img 
{
  max-width: 100%;
}
        
.Headerstyle 
{
  color:Black;
  transition: transform .2s;
  text-align: center;
  margin-top: 80vh;
}  
         
.Headerstyle:hover {
  transform: scale(1.5);
  transition: 0.2s;
}
 
.HeaderstyleBack 
{
  color:white;
  transition: transform .2s;
  text-align: center;
  margin-top: 80vh;
}  
         
.HeaderstyleBack:hover {
  transform: scale(1.5);
  transition: 0.2s;
}

.image1 { 
  padding: 10px;  
  transition: transform .2s;
}
         
.image2 { 
  padding: 10px;
  transition: transform .2s;
}

.image1:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}

.image2:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}
  
.imageback1 { 
  padding: 10px;  
  transition: transform .2s;
}
         
.imageback2 { 
  padding: 10px;
  transition: transform .2s;
}

.imageback1:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}

.imageback2:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}

.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: ##0000ffff;
  color: white;
  text-align: center;
}             

body {
  border-style: solid;
  border-width: 15px;
  border-radius: 5px;
  padding: 10px;
  transition: 5s;
}

body {
  margin:  0;
  padding: 0;
  animation: pulse 5s infinite;
}

.container {
  position: relative;
  width: 100%;
  margin...

Greetings to all, I have multiple questions:

  1. The issue with logos overlapping the border remains unsolved. How can I resolve this for both front and back sides? The desired layout is shown in the image linked below. https://i.sstatic.net/YG88m.png
  2. The size change effect on the Stackoverflow logo does not occur when hovering over it on either side.
  3. How do I change the blue bar's color to white when transitioning to the back side?

https://i.sstatic.net/adTwD.png 4) What adjustments can be made to enhance the accuracy of the flip card movement? Currently, it flips too quickly even at the slightest mouse interaction with the body element.

Answer №1

If you wish, you can utilize the following code snippet:

<html>
<style>
  .img {
    max-width: 100%;
  }
  
  /* Various CSS styles for different elements */
  ...
  
  @keyframes load {
    /* Animation keyframes definition */
  }
  
  @keyframes pulse {
    /* Another animation keyframes definition */
  }
  
  /* Flip card container styles */
  .flip-card {
    /* Styling for the flip card */
  }
  
  /* Positioning for front and back side of the flip card */
  ...
  
  </style>

<body>
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <div class="footer">
          <p class="Headerstyle"><b>Get in Touch With Me</b></p>
          <div>
            <div>
              <a href="https://stackoverflow.com/"><img class="image1" src="link/to/image1.png" alt="Image 1" width="60" height="60"></a>
              <a href="https://www.linkedin.com"><img class="image2" src="link/to/image2.png" alt="Image 2" width="60" height="60"></a>
            </div>
            <div class="container">
            </div>
            <div class="Loading"></div>
          </div>
        </div>
      </div>
      <div class="flip-card-back">
        <div class="footer">
          <p class="HeaderstyleBack"><b>E-MAIL ADRESS</b></p>
          <div>
            <div>
              <a href="https://stackoverflow.com/"><img class="imageback1" src="link/to/imageback1.png" alt="Image Back 1" width="60" height="60"></a>
              <a href="https://www.linkedin.com"><img class="imageback2" src="link/to/imageback2.png" alt="Image Back 2" width="60" height="60"></a>
            </div>
            <div class="container">
            </div>
            <div class="LoadingBack"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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 effect of iPad screen orientation on CSS styling

Exploring orientation testing using CSS for iPad. Below is the code snippet from the CSS file: @media only screen and (device-width:768px) and(orientation:portrait) { body { background: green; } } @media only screen and (device-width:768px) and(orient ...

Left align the CSS menu text next to the menu image

Currently, I have a basic CSS menu that includes background images aligned to the left. My goal is to have the text float to the left of each image as well. <div class='mmenu'><ul><li><a id="li6" class="menu-news" href= "vie ...

Enabling a checkbox grid for exclusive rectangular selections

Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...

Having trouble getting CSS animation to work on Mozilla using mozAnimationName?

<style> @keyframes shake { 0% { -moz-transform:scale(0);opacity:0; } 25% { -moz-transform:scale(1.3);opacity:1; } 50% { -moz-transform:scale(0.7);opacity:1; } 75% { -moz-transform:scale(2); ...

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

Tips for Sending <Div> Data to a Servlet

I attempted to pass the content of an entire div in a form action URL using JavaScript. However, when I try to retrieve this request parameter as a String on the servlet side, it is returning [object Object]. Below is my code for the form and JavaScript: ...

The horizontal center alignment of text is not working properly in Bootstrap v5.0

I'm currently learning Bootstrap v5.0 and working on creating a practice webpage with it. However, I've encountered an issue where the text is not aligning center horizontally. Despite using align-items-center, the centering is not working as int ...

What is the best method for transmitting data to the server using Ajax?

In order for the registration form to function properly, it must utilize Ajax to send data to the server. When the submit button is clicked, a spinning gear should appear. If the registration is successful, a message saying "You have successfully registe ...

Guide to Embedding an External CSS Stylesheet

I have made edits because the link to the "previously answered solution" is not helpful. Find additional information attached at the end of this question Original Query All my HTML pages contain two links to external style sheets. As a result, I am look ...

Trouble Aligning HTML Button to the Right

I'm currently working with this HTML code. My goal is to have the "Get Geotag" button aligned to the right side, with the text positioned anywhere to the left or above the button. However, I'm struggling to properly align the buttons and maintain ...

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

What was the recommended dimensions for CSS containers in 2018?

In the realm of responsive layout design, what is the recommended size for a max-width container as of 2018? My current choice is to use 1140px, which I find works well with the standard screen size of 1366px. ...

Flip an image by analyzing the colors beneath it

Looking for a way to invert the color of specific areas under a mask (PNG) for a floating menu. Rather than inverting all at once, I want only certain parts to be inverted underneath the mask. Is this achievable, or is there another approach I should consi ...

Updating the background image without having to validate the cache

I have implemented a basic image slideshow on my website using a simple Javascript function. The function runs every 5 seconds to update the CSS "background-image" property of a div element. While it is functional, I've noticed that each time the func ...

Trouble with the Rotate <text> feature in Internet Explorer 11 on Windows 10

I am using d3.js to draw SVG with the transform:rotate(180deg) property. It displays perfectly on Chrome, but doesn't work on IE11. I tried changing it to rotateY(180deg), and it works with div elements but not with text elements. Here is my screen an ...

Can a collapse that was saved in a separate file be displayed on the requested page?

Imagine having a navigation bar on your website's index page with four buttons, each leading to a different page. What if you wanted to bring all those separate pages together into one by using collapsible elements? That's the challenge this user ...

Identify changes in attributes on elements that are updated automatically

On my webpage, I want to have two select boxes that are connected so their values always match. Here's an example: Imagine a page with two selects: <select class="myselector"> <option value='1'>1 <br> < ...

Latest iOS and Safari updates are now stripping away classes that have been dynamically added through jQuery scripts during scrolling

Ever since the recent iOS Update (8+), Safari seems to be interfering with a jQuery script I rely on for my mobile navigations. The markup is a standard unordered list generated from Contao. What happens now is that when I view my page on iOS 8+, the scri ...

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

Every time I click, the click event is getting attached repeatedly through the on method

Here is the HTML code that I am working with: <div class="connect"> <ul> <li><a href="#">Assign a Task</a></li> <li><a attr="viewCard" href="#">View Ca ...