Title: Partiallydecapitated's Replies | WordPress.org --- # Partiallydecapitated [ ](https://wordpress.org/support/users/partiallydecapitated/) * [Profile](https://wordpress.org/support/users/partiallydecapitated/) * [Topics Started](https://wordpress.org/support/users/partiallydecapitated/topics/) * [Replies Created](https://wordpress.org/support/users/partiallydecapitated/replies/) * [Reviews Written](https://wordpress.org/support/users/partiallydecapitated/reviews/) * [Topics Replied To](https://wordpress.org/support/users/partiallydecapitated/replied-to/) * [Engagements](https://wordpress.org/support/users/partiallydecapitated/engagements/) * [Favorites](https://wordpress.org/support/users/partiallydecapitated/favorites/) Search replies: ## Forum Replies Created Viewing 4 replies - 1 through 4 (of 4 total) * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[Easy Theme and Plugin Upgrades] Folder already Exists](https://wordpress.org/support/topic/folder-already-exists-1/) * [Partiallydecapitated](https://wordpress.org/support/users/partiallydecapitated/) * (@partiallydecapitated) * [11 years, 11 months ago](https://wordpress.org/support/topic/folder-already-exists-1/#post-4939516) * Is there a fix yet? I have the exact same problem using the same versions too. This site is hosted at hostgator. Any tips much appreciated. Thanks for the great plugin. Works great on my other sites. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[WooCommerce] Change image on mouseover](https://wordpress.org/support/topic/change-image-on-mouseover/) * [Partiallydecapitated](https://wordpress.org/support/users/partiallydecapitated/) * (@partiallydecapitated) * [12 years, 6 months ago](https://wordpress.org/support/topic/change-image-on-mouseover/page/2/#post-3424952) * Another note, This declaration in the stylesheet: * .flip-container:hover .flipper, .flip-container.hover .flippertransform { rotateY( 180deg); } * is what actually flips the cards. * There are many other css transform properties you can use, and combining them can create some crazy effects. To see the entire set of css transform properties see: [http://www.w3schools.com/cssref/css3_pr_transform.asp](http://www.w3schools.com/cssref/css3_pr_transform.asp) and click on the PLAY IT button for each effect to experiment. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[WooCommerce] Change image on mouseover](https://wordpress.org/support/topic/change-image-on-mouseover/) * [Partiallydecapitated](https://wordpress.org/support/users/partiallydecapitated/) * (@partiallydecapitated) * [12 years, 6 months ago](https://wordpress.org/support/topic/change-image-on-mouseover/page/2/#post-3424951) * Certainly, but here a couple of caveats: 1. I’ve done this on several sites, but some themes may create problems. Only way to tell is to try it and see. 2. Prepare to fiddle around with the css to get everything aligned right. On some themes this can be frustrating. 3. Be sure you make all the edits in either a REAL editor or on the TEXT tab of the WP editor. Using the Visual Editor in the WP interface won’t work. * Here is the html for 1 card. You can repeat as needed for how many flipcards you require per row. On the example site I posted I used 3 cards/images per row. * ```
<-- this is the div for the first indivudual card, repeat as necessary -->
<-- this is where the front image goes -->
service3
<-- This is where the image for the back goes -->

Title

This is a short description about this project and/or why it's relevant. Link Text.
``` * Basically, all this does is create the main div (1 row of flip cards) that contain 2 more div to hold the front and back images. In this instance, the div for the BACK image contains other html elements (text, links, etc.) if you only want to flip images you can lose those elements. There may be a more elegant solution to span the cards/images across the screen, but I’m not smart enough to figure it out. This method has worked with several WP themes for me. * Getting all the images aligned will be the hardest task. Be prepared to adjust image size, div width, float, display (inline, block, etc.) as required to play well with your theme. You can adjust all parameters with the style sheet, but depending on your theme you may find getting adjusting things easier to do with inline declarations first. Once you get everything where you want it, you can move all the properties into the stylesheet to clean the html up. * I haven’t got that far yet with this site; hence the inline styles. * The css is where the magic happens: * ``` /* simple */ .main-flip-box{ cursor: default; float: left; /* width: 1280px; */ margin: 0 0 0 5%; overflow: hidden; position: relative; text-align: center; } .main{ position:relative; /* width:1200px; */ margin: 0 auto; } .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; perspective: 1000; float: left; margin: 20px; border: 1px solid #ccc; } .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-container, .front, .back { width: 300px; height: 210px; } .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; } .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .front .name { font-size: 2em; display: inline-block; background: rgba(33, 33, 33, 0.9); color: #f8f8f8; font-family: Courier; padding: 5px 10px; border-radius: 5px; bottom: 60px; left: 25%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg); } .back-logo { position: absolute; top: 40px; left: 90px; width: 160px; height: 117px; background: url(logo.png) 0 0 no-repeat; } .back-title { font-weight: bold; color: #00304a; position: absolute; top: 15px; left: 0; right: 0; text-align: center; font-family: Courier; } .back p { position: absolute; bottom: 40px; left: 35px; right: 0; text-align: center; padding: 0 0px; top: 50px; } ``` * Please note: I just pasted the css as is and not all of it is necessary if you aren’t going to have text on the back image. Some of the declarations are just for me to experiment with the layout once my client provides the info needed to finish the site. The hardest part of the css will be defining the width of the containers to fit your theme. * Firebug is your best friend. If you know how to firebug it shouldn’t be hard to tweak the layout to fit your template. * Lastly, and importantly, because the transformations (flip) are all css transforms– they will only work in modern browsers. * Hope that helps and good luck. * Forum: [Plugins](https://wordpress.org/support/forum/plugins-and-hacks/) In reply to: [[WooCommerce] Change image on mouseover](https://wordpress.org/support/topic/change-image-on-mouseover/) * [Partiallydecapitated](https://wordpress.org/support/users/partiallydecapitated/) * (@partiallydecapitated) * [12 years, 6 months ago](https://wordpress.org/support/topic/change-image-on-mouseover/page/2/#post-3424948) * I did it on a site I’m working on right now with html and css. You can see the effect working here: [http://www.cbdtesting.biz/](http://www.cbdtesting.biz/) scroll down a bit to see it working. You have to mouseover the tiles in the Recent Work Section. As previously noted, it’s not an intuitive effect and marginal UX, but it is fun to do. The original theme was purchased from themeforest. All modifications were added in the editor for the page and the css was added in the custom css area of the theme. Site is still under development, but the effect works. This version flips the image to display text, but that could easily be changed to show another pic. If that’s what you want I can post how I did it. Good Luck. Viewing 4 replies - 1 through 4 (of 4 total)