WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
[resolved] Adding CSS3 Flip Card to Gallery (3 posts)

  1. rep1946
    Member
    Posted 1 year ago #

    I would like to add Flip Card animation to the gallery href="http://css3playground.com/flip-card.php" Does anyone know where I should place the DIV's. I tried placing it in images.php but that didn't seem to work. I'm relatively new to this so this maybe a little ambitious on my part. Any insight is appreciated.

    Here is the excerpted CSS from CSS3 Playground:

    .panel {
    			float: left;
    			width: 200px;
    			height: 200px;
    			margin: 20px;
    			position: relative;
    			font-size: .8em;
    
    			-webkit-perspective: 600px;
    			-moz-perspective: 600px;
    		}
    		/* -- make sure to declare a default for every property that you want animated -- */
    		/* -- general styles, including Y axis rotation -- */
    .panel .front {
    			float: none;
    			position: absolute;
    			top: 0;
    			left: 0;
    			z-index: 900;
    			width: inherit;
    			height: inherit;
    			border: 1px solid #ccc;
    			background: #6b7077;
    			text-align: center;
    
    			-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
    			-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
    			box-shadow: 0 1px 5px rgba(0,0,0,0.9);
    
    			-webkit-transform: rotateX(0deg) rotateY(0deg);
    			-webkit-transform-style: preserve-3d;
    			-webkit-backface-visibility: hidden;
    
    			-moz-transform: rotateX(0deg) rotateY(0deg);
    			-moz-transform-style: preserve-3d;
    			-moz-backface-visibility: hidden;
    
    			/* -- transition is the magic sauce for animation -- */
    			-o-transition: all .4s ease-in-out;
    			-ms-transition: all .4s ease-in-out;
    			-moz-transition: all .4s ease-in-out;
    			-webkit-transition: all .4s ease-in-out;
    			transition: all .4s ease-in-out;
    		}
    		.panel.flip .front {
    			z-index: 900;
    			border-color: #eee;
    			background: #333;
    
    			-webkit-transform: rotateY(180deg);
    			-moz-transform: rotateY(180deg);
    
    			-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    			-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    			box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    		}
    
    		.panel .back {
    			float: none;
    			position: absolute;
    			top: 0;
    			left: 0;
    			z-index: 800;
    			width: inherit;
    			height: inherit;
    			border: 1px solid #ccc;
    			background: #333;
    			text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 
    
    			-webkit-transform: rotateY(-180deg);
    			-webkit-transform-style: preserve-3d;
    			-webkit-backface-visibility: hidden;
    
    			-moz-transform: rotateY(-180deg);
    			-moz-transform-style: preserve-3d;
    			-moz-backface-visibility: hidden;
    
    			/* -- transition is the magic sauce for animation -- */
    			-o-transition: all .4s ease-in-out;
    			-ms-transition: all .4s ease-in-out;
    			-moz-transition: all .4s ease-in-out;
    			-webkit-transition: all .4s ease-in-out;
    			transition: all .4s ease-in-out;
    		}
    
    		.panel.flip .back {
    			z-index: 1000;
    			background: #80868d;
    
    			-webkit-transform: rotateX(0deg) rotateY(0deg);
    			-moz-transform: rotateX(0deg) rotateY(0deg);
    
    			box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    			-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    			-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    		}


    [Please use the code buttons when posting code here]

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Hi,

    I am not really sure how would this be integrated, gallery does have it's own "unique" CSS elements. Take a look at this post please, maybe that will help and try to incorporate in .gallery.

    Thanks,
    Emil

  3. rep1946
    Member
    Posted 1 year ago #

    Thanks Emil! I think this may a bit overambitous for my first theme. But employing the light box may be a good alternative in the interim.

    I do have one follow up question. When editing the "full size" or "large" image is that page image.php? I want to get rid of the image information in the screenshot.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic