Exploring the Interactive Possibilities of CSS3 with Background Tiles

I'm struggling to implement a flip effect where the content of a div changes, but I can't seem to prevent the text from disappearing after a few seconds.

I've tried using backface-visibility:hidden with no luck!

HTML

<div class="cards">
<div class="front">
    This is the front
</div>
<div class="back">
    This is the back
</div>
</div>

CSS

.cards {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 2s;
    -webkit-transition: transform 2s;
    transition-delay:0s;
     -webkit-transition-delay:0s;
    background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
    background-size:cover;
}
.cards.flipped{
    transform: rotateY( 180deg );
    -webkit-transform: rotateY( 180deg );
    background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
    background-size:cover;
}
.back{
     transform: rotateY( 180deg );
     -webkit-transform: rotateY( 180deg );
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.front{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
 }

Any suggestions or solutions?

htmlcsscss-transitions

Answer №1

If you're in search of a solution, I've crafted a 220px square block (adjustable to suit your needs) featuring the image linked in your query as its background.

Check out the JSFiddle here

CSS Styling:

.flip-container {
    position:relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
.flip-container:hover .flipper {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    filter: FlipH;
    -moz-filter: FlipH;
    -ms-filter:"FlipH";
}
.flip-container, .front, .back {
    width: 220px;
    height: 220px;
}
.flipper {
    -webkit-transition: 0.8s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.8s;
    -ms-transform-style: preserve-3d;
    -moz-transition: 0.8s;
    -moz-transform-style: preserve-3d;
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg') no-repeat;
    background-size:100% 100%;
    color:red;
}

.front:hover {
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
}
.back {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter: FlipH;
}
.front-title {
font-size:20px;
text-align:center;
} 
.back-title {
font-size:25px;
text-align:center;
}

HTML Structure:

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <div class="front-title">Front Text Here</div>
        </div>
        <div class="back">
            <div class="back-title">Text Behind</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

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

cssangulartypescriptless

Make the inner div within the td stretch to cover the entire height of the td

Inside the first tds, there is dynamic text content that automatically expands the trs and tds. However, the second tds have a div with a background image but no text inside. I want these divs with background images to expand or collapse along with the tab ...

htmlcss

How can I make my opacity change on hover without the need for JavaScript?

I've been attempting to design a book cover that will become fully visible when hovered over, but for some reason it's not working #book_cover { display: block; margin-left: auto; margin-right: auto; width: 25%; height: 71%; ...

htmlcss

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf

PHP code that generates a drop-down list using a foreach iteration

all I'm encountering a slight issue with trying to create a dynamic drop down list. Here's the code I've written: <select name='categoryID' > <?php foreach( $categories as $category)?> <option value="<?p ...

phphtml

Extract the post date/time directly from the HTML code without relying on JavaScript

I encountered an issue while attempting to store the time and date from a form into a variable. An error message indicated that the variable was unknown. Below is the code I used: HTML <div class="form-group"> <label for="dp">Departure Da ...

phphtml

Troubleshooting directive not functioning properly with AngularJS ng-click

My HTML img tag is not responding to ng-click when clicked. I'm puzzled by this issue occurring in masonryPictureView.html Main page - home.html <ng-masonry> <ng-picture ng-items="projectdescription.pictures"></ng-picture> </n ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-click

Achieving compatibility with IE7 for utilizing "before:" and "after:" pseudo-elements along with the "box-sizing:border

My website is constructed with twitter bootstrap 3 and functions perfectly on all browsers except for IE7. IE7 seems unable to interpret pseudo classes like before:, after:, and box-sizing: border-box. Is there a solution to make IE7 understand this code ...

cssinternet-explorer-7twitter-bootstrap-3

Tips for maintaining the chat scroll position while typing on mobile devices

Check out this example page: https://codesandbox.io/s/summer-flower-uxw47?file=/index.html:4175-4223 The issue at hand is that when accessing the site from a mobile device and tapping on the input field, the keyboard pops up. This causes the text in the m ...

javascripthtmlcss

Menu items on the responsive design are vanishing

I am facing an issue with my sample menu layout. It appears fine on desktop view, but when I switch to a smaller window size of 480px, the items from About to Contact disappear when I hover away from the last item in the .has-children class. It seems like ...

htmlcss

Utilizing Font Awesome icons within a JSON structure

I'm running into a bit of trouble trying to display font awesome icons. The text is written in json using a rakefile, and I'm attempting to insert a font awesome icon within the text. However, I'm facing difficulties because the text is in j ...

cssruby-on-railsjsonangularjs

Content missing after centered banner

Seeking help! I need to figure out how to center text after a container. Whenever I try, it ends up either behind the banner picture or misaligned. I want both the banner and the text example to be centered, but placing the text in the right position has b ...

csshtml

Unable to eliminate the unwanted space at the top of the division

I am encountering an issue where I have a div containing a label, but there seems to be some unwanted space above the div that I can't seem to remove. It's puzzling me as to why this space is appearing. Query: What could be causing the space ab ...

htmlcss

What steps do I need to follow in order to modify a CSS style definition to create a border around

I currently have a CSS style defined as follows: [class*="col-"] { border: 1px solid #dddddd; } This particular CSS definition gives borders to all of the bootstrap grid columns on my page. However, I now want to apply borders only to the bootstrap ...

cssangularjstwitter-bootstrap

Discrepancies in Span Element Behavior Between Firefox and Chrome

Seeking assistance with a tooltip feature that reveals extra information when a user hovers over a span. The issue arises when the span is split across two lines, causing the extra information to appear in different positions on Firefox and Chrome browsers ...

css

Access information from multiple div elements using JavaScript data-attributes

Having trouble retrieving data-attribute values from multiple divs with the same class when clicked. The goal is to display the data value of the clicked div. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) ...

javascripthtmlcsscustom-data-attribute

Display the code exactly as it appears

Important Note: I have to insert the following code three times in the HTML body of a static webpage. Instead of repeating it multiple times and cluttering the code, I prefer to have a single line (repeated three times) that calls the function to output th ...

phphtmlescaping

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

javascriptjqueryhtmlcss

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

javascriptcssreactjsresponsive-designtailwind-css