CSS tilt effect for images

I'm currently working on a project where I have two images stacked on top of each other. Using CSS transformations, I want to create a flip effect by first rotating both images away and then bringing the bottom image back in. However, I'm facing an issue where the animation state changes abruptly when unhovering.

JSFiddle

JavaScript

$('.portfolio-pic-1').hover(function(){
    $(this).toggleClass('portfolio-pic-1-hover');
    $('.portfolio-pic-1-2').toggleClass('portfolio-pic-1-2-hover');
},
function()
{   
    $(this).toggleClass('portfolio-pic-1-unhover');
    $('.portfolio-pic-1-2').toggleClass('portfolio-pic-1-2-unhover');
});

CSS

    .portfolio-pic-1-hover {
    -webkit-animation: rotate-away 1s 1 ease-in forwards;
    /* Safari 4+ */
    -moz-animation: rotate-away 1s 1 ease-in forwards;
    /* Fx 5+ */
    -o-animation: rotate-away 1s 1 ease-in forwards;
    /* Opera 12+ */
    animation: rotate-away 1s 1 ease-in forwards;
    /* IE 10+, Fx 29+ */
}
.portfolio-pic-1-2-hover {
    -webkit-animation: rotate-in 2s 1 ease-out forwards;
    /* Safari 4+ */
    -moz-animation: rotate-in 2s 1 ease-out forwards;
    /* Fx 5+ */
    -o-animation: rotate-in 2s 1 ease-out forwards;
    /* Opera 12+ */
    animation: rotate-in 2s 1 ease-out forwards;
    /* IE 10+, Fx 29+ */
}
.portfolio-pic-1-unhover {
    -webkit-animation: rotate-in 2s 1 ease-out forwards;
    /* Safari 4+ */
    -moz-animation: rotate-in 2s 1 ease-out forwards;
    /* Fx 5+ */
    -o-animation: rotate-in 2s 1 ease-out forwards;
    /* Opera 12+ */
    animation: rotate-in 2s 1 ease-out forwards;
    /* IE 10+, Fx 29+ */
}
.portfolio-pic-1-2-unhover {
    -webkit-animation: rotate-away 1s 1 ease-in forwards;
    /* Safari 4+ */
    -moz-animation: rotate-away 1s 1 ease-in forwards;
    /* Fx 5+ */
    -o-animation: rotate-away 1s 1 ease-in forwards;
    /* Opera 12+ */
    animation: rotate-away 1s 1 ease-in forwards;
    /* IE 10+, Fx 29+ */
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes rotate-away {
    0% {
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
    100% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
}
/* Standard syntax */
 @keyframes rotate-away {
    0% {
    }
    100% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
}
@keyframes rotate-in {
    0% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    50% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    100% {
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes rotate-in {
    0% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    50% {
        -webkit-transform:rotateY(90deg);
        -moz-transform:rotateY(90deg);
        -ms-transform:rotateY(90deg);
        -o-transform:rotateY(90deg);
        transform:rotateY(90deg);
    }
    100% {
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -ms-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
}
.img-container {
    position: relative;
    height: 507px;
    padding-bottom: 25px;
}
.img-container img {
    position: absolute;
    left: 25%;
    overflow: hidden;
}

Is there anyone who can offer assistance with this issue?

jqueryhtmlcsscss-animations

Answer №1

Here is a solution that might meet your needs: I have designed a square block with dimensions of 220px (you can adjust as needed), and it includes the image you referenced in your question as its background.

Take a look at this JSFiddle

CSS Code:

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

.front
{

    background:url('http://s27.postimg.org/ibckqwzub/black.png') no-repeat;
    background-size:100% 100%;
}

.back {
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter: FlipH;
    background:url('http://s27.postimg.org/8pj0am8oj/rainbow.png') no-repeat;
    background-size:100% 100%;
}
.front-title {
font-size:20px;
text-align:center;
} 
.back-title {
font-size:25px;
text-align:center;
}

HTML Code:

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <div class="front-title">This is the front Text</div>
        </div>
        <div class="back">
            <div class="back-title">This is the text behind</div>
        </div>
    </div>
</div>

Answer №2

When you adjust the Hover to Mouseover in your Fiddle, it seems to function better within your code.

$('.portfolio-pic-1').mouseover(function () {
$(this).toggleClass('portfolio-pic-1-hover');
$('.portfolio-pic-1-2').toggleClass('portfolio-pic-1-2-hover');

},

I appreciate the version that was shared by divy3993. Great job!

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

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

javascriptjqueryhtmliframe

The webpage hosted on Heroku displays a blank background, requiring users to refresh the page with an F5 key

I developed a group chat program using Python microframework flask, vanilla JavaScript, and Flask-SocketIO. The program is deployed on heroku and can be accessed here: . After deployment, I encountered the following issue: While the program worked fine o ...

javascripthtmlcssflaskbootstrap-4

Intermittent loading issues with Highcharts using AJAX requests

We've encountered intermittent errors when using Highcharts. Despite our efforts, we can't seem to pinpoint the cause of these issues in Chrome: Uncaught Highcharts error #16: www.highcharts.com/errors/16 VM210:16 HighCharts was already loaded V ...

javascriptjqueryajaxdjangohighcharts

What are the benefits of sticking with Express versus transitioning to a combination of JavaScript and HTML?

Recently, I've been developing a web application that involves taking user input to make modifications to files on the server side. The main logic for this project is built in node.js and operates via command line, with the rest of the site being deve ...

javascripthtmlnode.jsexpress

Ensuring Consistent Div Heights in Bootstrap Rows on Small Devices

Is there a way to ensure that both divs in a bootstrap row maintain the same height when the row collapses on smaller devices? Here's an example of the code: <div class="row"> <div class="col-md-6"> content </div> ...

htmlcssbootstrap-4

How to incorporate an image within a div element without reliance on the <img> tag

I am dealing with HTML content <div> <img src="xyz.jpg"> </div> The challenge I am facing is fetching an image in hex format from a web service, converting it to JPEG, and displaying it inside a div. However, the <img src=""> ta ...

javascriptimagehtml

"Discrepancy detected: Image size does not align with table

I recently encountered an issue where I placed an image with a height of 900px inside a table that also had a height of 900px. Strangely, an additional 5px of height was automatically added to the bottom of the table. Here is the code snippet that showca ...

htmlcss

Center the span in CSS by setting its position to absolute

I am trying to create a span element positioned as absolute inside a div. The div has top and left values set. When the user inputs text, the span expands with the given text towards the right to contain it. However, I would like it to grow symmetrically o ...

javascripthtmlcss

Creating a dynamic navigation bar featuring an interactive search option

I am currently working on creating a responsive navigation bar with bootstrap, similar to the one shown in this example. However, I am facing issues with aligning the search button correctly and ensuring that the tabs remain intact when collapsed. Instead ...

jqueryhtmlcsswordpresstwitter-bootstrap

What is the process for implementing NPM in a vanillaJS, html, and css project?

My current project consists of three html files: index.html, about.html, and resource.html. Additionally, there are two css files - style.css and style1.css, as well as two javascript files - script.js and script1.js. Index.html is linked to style.css and ...

javascripthtmlcssnpmwebpack

Selenium in Java is unable to send keys or click on elements

I am attempting to login to this specific website Below is the code I am using : driver.findElement(By.id("userid_sebenarnya")).sendKeys("myUserName"); This is the property for the input text field with id='userid_sebenarnya' <div class="f ...

javahtmlselenium

Incorporating Javascript into HTML

I have developed a script to randomly change the size of an element, but I am struggling to understand how to incorporate it using HTML or iframe code for randomization. <script type="text/javascript"> var banner1 = ["728", "90"]; var banne ...

javascriptjqueryajaxhtml

Discovering offspring that possess characteristics using Selenium

I've been struggling to find a regular expression that will work for my needs. What I'm Trying to Achieve In a hierarchy, I want to retrieve all the children (across multiple levels) that have specific classes. For example: I need to locate th ...

javahtmlseleniumxpath

Building an AJAX form with error validation intact using simple_form

Seeking assistance from the experienced rails community, I present a challenging question that has left me stuck for days. In an effort to learn more about rendering, I am working on a dummy app based on this ajax/jquery tutorial. Following the guide, I s ...

jqueryruby-on-railsajax

Easily convert 100% of the height to pixels

Is there a way in HTML to convert a div's height from 100% to pixels without specifying a particular pixel value? ...

htmlcssasp.net

Monitor the x and y positions for platformer game interactions using only JavaScript and jQuery

I am currently working on a 2D platformer game as part of my college project alongside my friends. We are using jQuery and pure JS for development. So far, we have been able to move the character left and right using jQuery's animate function, and ena ...

javascriptjquery

Assignment of Microsoft Avatar Colors

What method does Microsoft utilize to assign colors to contacts in their applications? I've searched online with no luck in finding an answer. In programs like Outlook or Android, when a new contact is added without an image for the avatar, Microsof ...

androidhtmlcssoutlookangular-material

Rearrange content using media queries

Is it possible to rearrange the position of two HTML elements when accessing a website from a tablet? Here is the current setup: <section id="content"></section><!-- End section#content --> <aside id="sidebar"></aside><!- ...

javascriptcss

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

Tips for Adding or Deleting 2 Rows in a Table

When the basket icon on the right is clicked, I want to remove both the current <tr> and the yellow one as well. Check out this screenshot: This is the HTML code for the two rows that need to be deleted with a click: <tr> <t ...

javascriptjqueryhtml-table