We Keep Coding

How do I make this hover caption work properly?

In the photoset block it had this hover with a "readmore" text that appeared when I hovered over the picture. All I did was replace inside the readmore block with the CMS caption
This has caused the hover to not work right as the block and the caption appear separately.
The website is compassionlens.photo to check out the full code but the CMS elements do not populate in dev tools. Let me know if you need to see more of the code. Can you help me figure out how to make the caption appear when I hover over the photo?
{block:Photo}
<figure>
{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="
{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{/block:PermalinkPage}
{block:IndexPage}{LinkOpenTag} <img src=" .
{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}"
height="{PhotoHeight-HighRes}"/>{LinkCloseTag}
{block:Caption}<figcaption>{Caption} .
</figcaption>{/block:Caption}
{/block:IndexPage}
</figure>
{block:PermalinkPage}
<div class="post_photo_content_wrapper">
{block:Caption}
<div class="post_content">{Caption}</div>
{/block:Caption}
<div class="post_actions
{block:Caption}with_caption{/block:Caption} clearfix">
{/block:Photo}
.post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption {
opacity: .75;
}
.post.index.photo figure:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.post.index.photo figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 3;
text-color:white;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
display: block;
text-align: center;
opacity: 0;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.permalink.photo figure {
display: block;
z-index: 2;
overflow: hidden;
}
.post.permalink.photo img {
display: block;
margin: 0 auto;
}
.post.index.photo figcaption a {
display: inline-block;
padding: 10px 10px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: opacity ease 0.1s;
-moz-transition: opacity ease 0.1s;
-o-transition: opacity ease 0.1s;
transition: opacity ease 0.1s;
}
.post.index.photo figcaption a:hover, .post.index.photo figure:hover figcaption {
opacity: .75;
}

I think i understand what you want now. I have made it work using
the CSS hover effect as show below
.image {
width: 400px;
}
.overlay {
position: absolute;
top: 30px;
left: 40px;
height: 100px;
width: 100px;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.image:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="image">
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="google">
<div class="overlay">
<p class="text">This is a text</p>
</div>
</div>

I think what you are looking for is tooltips. w3schools has a good site about them. This is what they look like
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here is the site if you want to learn more
https://www.w3schools.com/css/css_tooltip.asp
Edit:
If you want to do this for an image, take a look at this other post
Tooltip on image
Here you will see that you need to use the attribute "title", just as shown below
<img src="https://smalltotall.info/wp-content/uploads/2017/04/google-favicon-vector-400x400.png" alt="alternative text" title="this will be displayed as a tooltip"/>

How to hide/show the menu using classList toogle

I am creating an interactive hamburger button that shows and hides the menu. what I am trying to achieve here is when I click the hamburger button, the menu shows up and when I click transformed "X" button, the menu hides itself vice versa. I would appreciate tips. Thank you so much.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

You have done everything except connect those two. You just need to add the following CSS:
.menu {
display: none;
}
.change + .menu {
display: block;
}
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
display: none;
}
.change + .menu {
display: block;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>
Bonus
If you want a nice fading animation, you can also use opacity.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
opacity: 0;
transition: opacity 0.5s linear;
}
.change + .menu {
opacity: 1;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

Please try this code
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -7px);
transform: rotate(45deg) translate(-8px, -7px);
}
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
max-height: 0;
padding: 0;
}
.change + .menu {
max-height: 500px;
}
.change + .menu,
.change ,
.menu {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

Half circle animation start on button click

I'm trying to get my circle loader running. But didn't found how to get the animation running when clicking the Try it button.
Any ideas?
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>
Here the code: https://jsfiddle.net/pzc41skn/

Here is how you can achieve an animation on clicking of the button:
function myFunction() {
$('.liElem').remove();
$(".chart-skills").html('<div class="liElem" id="eins"></div>');
}
body {
font: normal 16px/1.5 'Roboto', sans-serif;
padding: 130px 0 0 0;
background: #f1f1f1;
}
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.chart-skills *,
.chart-skills::before {
box-sizing: border-box;
}
/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chart-skills {
position: relative;
width: 350px;
height: 175px;
overflow: hidden;
}
.chart-skills::before,
.chart-skills::after {
position: absolute;
}
.chart-skills::before {
content: '';
width: inherit;
height: inherit;
border: 45px solid rgba(211, 211, 211, .3);
border-bottom: none;
border-top-left-radius: 175px;
border-top-right-radius: 175px;
}
.chart-skills::after {
content: '';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: bold;
color: cadetblue;
}
.chart-skills .liElem {
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
border: 45px solid;
border-top: none;
border-bottom-left-radius: 175px;
border-bottom-right-radius: 175px;
transform-origin: 50% 0;
transform-style: preserve-3d;
backface-visibility: hidden;
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: linear;
}
.chart-skills #eins {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .4s;
}
.chart-skills #zwei {
z-index: 4;
border-color: green;
animation-name: rotate-one;
animation-delay: .8s;
}
#keyframes rotate-one {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
/**
* 32% => 57.6deg
* 57.6 + 21.6 => 79.2deg
*/
}
}
#bottom {
transform: scale(-1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-skills">
<div class="liElem" id="eins"></div>
</div>
<div class="chart-skills" id="bottom">
<div class="liElem" id="zwei"></div>
</div>
<button onclick="myFunction()">Try it</button>

inserting a text box at top of the page

I have been trying this for a lot of time. How can I add a bigger text box on the top of the page ie it would be outside the div tag of the button which would be clicked
https://jsfiddle.net/Lx3rtLx0/2/
For eg on clicking one of the four emerging images it should display
a text box on the top of the page like the one shown below
I want the code given to arrive on the page on clicking one of the images. I.e. when you click on one of the images(jsfiddle) ..a text box(code given) should appear. on different clicks diff content.
#adbox {
width: 800px;
height: 150px;
border-width: 0;
border-color: red;
background-color:grey;
}
#adbox .adbox1 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:left;
background-color:lightblue;
margin:0px 0px 0px 300px;
}
#adbox .adbox2 {
width: 200px;
height: 50px;
border-width: 0;
border-color: red;
float:right;
background-color:red;
margin:0px 60px 0px 0px;
}
.clear{
clear:both;
}
<!DOCTYPE html>
<html>
<head>
<title>BOX</title>
</head>
<body>
<div align=center><div id="adbox">
<h1><br> xyz sent you a hug</br></h1>
<div class="adbox1">
<br>Send a Hug Back</br>
</div>
<div class="adbox2">
<br>Ack | Dis</br>
</div>
<div class="clear"/>
</div></div>
</body>
</html>

Not super clear on your question, do you need to add an input to the jsfiddle in your question? or the code you have listed in your question? If it is in the jsfiddle, just add this to the top of the code:
<body>
<section id="header">
<div class="inner">
<div>
<input type="text" style="position:absolute; width:300px;" />
</div>
Otherwise, the attribute position:absolute should work out for you, if it isn't in the right place, add attributes like top:0; left:0, and that will put your input in the top left despite anything else in your code.

Simple, on your click button add the code as in https://jsfiddle.net/Lx3rtLx0/6/
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
So the full JS become
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
var input = document.createElement('input'); // if you want label just change inpput to label
input.type='text';
input.value = 'hugs or whatever';
document.body.insertBefore(input, document.body.firstChild);
});
});

You can use a data- attribute on your clickable divs to link them with a specific element (a textbox in this case). For example:
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
In the click handler, we can retreive this attribute and show the element with id adbox1.
Full example:
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
$(".btn.btn-icon").click(function() {
$('.adbox').hide();
$('#' + $(this).data('adbox')).show();
});
$('.adbox').click(function() {
$(this).hide();
});
});
html,
body {
height: 100%;
overflow: hidden;
}
.absolute-center,
.menu,
.menu .btn .fa,
.menu .btn.trigger .line {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu {
width: 5em;
height: 5em;
}
.menu .btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content: url("http://i.stack.imgur.com/Yse7Q.jpg");
}
.menu .btn.trigger:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon {
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(3) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.rotater:nth-child(4) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon {
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
background-image: url("http://i.stack.imgur.com/Yse7Q.jpg");
background-size: cover;
align: top;
}
.text-box {
text-align: center;
z-index: 3;
font-size: 18px;
font-weight: 900;
color: white;
padding-top: 30px;
opacity: 0;
-webkit-transition: all 0.5s ease;
/* Safari */
transition: all 0.5s ease;
}
.text-box:hover {
opacity: 1;
}
.adbox {
display: none;
position: absolute;
top: 10px;
width: 120px;
left: 50%;
margin-left: -70px;
background: grey;
padding: 10px;
color: white;
text-align: center;
border-radius: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed" data-adbox="adbox1">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret" data-adbox="adbox2">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family" data-adbox="adbox3">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love" data-adbox="adbox4">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="adbox" id="adbox1">
<h1>xyz sent you a hug</h1>
</div>
<div class="adbox" id="adbox2">
<h1>Send a Hug Back</h1>
</div>
<div class="adbox" id="adbox3">
<h1>Ack | Dis</h1>
</div>
<div class="adbox" id="adbox4">
</div>

CSS 3d Transform in IE

I'm trying to create a vertical flip effect, but can't get it to work at all in any version of IE.
I tried adding the preserve 3d fix to the child elements but still nothing was working so I'm completely lost now.
Here is a jsfiddle: https://jsfiddle.net/y3x706o3/
As you can see, it works properly in chrome etc, but in IE there is no flip and the back colour from .creation:after shows through on top of the images.
Is there any way I can get this to work in IE? I'm certain that it will not be the same as chrome, but is there a way to have the images move to revel the text underneath at all? I'm willing to look at javascript alternatives too.
HTML
<div class='flip-container left-section'>
<div class='creation'>
<div class='front'>
<div class='cont'>
<img src="http://lorempixel.com/246/300/" alt="blah blah">
</div>
</div>
</div>
</div><!--
--><div class='flip-container right-section'>
<div class='creation'>
<div class='front'>
<div class='cont'>
<img src="http://lorempixel.com/574/300/" alt="blah blah">
</div>
</div>
</div>
</div>
<div class="back">
<div class="left-section">
<h3>Blah</h3>
<p>hjsad sahjkd kjwdakjkjw dakj wdakjh dwa</p>
</div>
<div class="right-section">
<h3>Foobar</h3>
<p>jkhwejkadwjh d wa jdwwd jkwdj wd ajk wdkjdewkjljdkwejwd jdwajdwakj ljlk dwa</p>
</div>
</div>
<div class="clearfix"></div>
</div>
CSS
.flip-container {
-webkit-perspective:1200;
-moz-perspective:1200;
perspective:1200;
display: inline-block;
z-index: 400;
position: relative;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
transition:all 0.6s;
}
.left-section {
width: 30%;
float: left;
}
.right-section {
width: 70%;
float: left;
}
.flip-container:hover {
z-index: 998;
}
.flip-container:hover .creation {
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
}
.creation {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
width:100%;
float:left;
-webkit-transition:all 0.6s;
-moz-transition:all 0.6s;
transition:all 0.6s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.front {
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
backface-visibility:hidden;
}
.creation:after {
content: '';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
background-color: #808080;
-webkit-transform: rotateY( 180deg );
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.creation p {
color:#666;
display:block;
width:auto;
text-align:center;
line-height:184px;
margin:0 30px;
font-size:20px;
text-transform:uppercase;
text-shadow:1px 1px 1px #999;
font-family:sans-serif;
}
.creation p span {
vertical-align:middle;
display:inline-block;
line-height:1.4;
}
.cont {
width:100%;
}
.cont img {
width: 100%;
display: block;
}
.flipbook-cont {
position: relative;
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.flipbook-cont.fold {
margin-top: 25px;
}
.flipbook-cont.flip {
margin: 50px auto;
-webkit-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
-moz-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
}
.flipbook-cont.fold img {
display: block;
width: 100%;
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 25px 0;
background-color: white;
}
.back .left-section {
padding: 0 40px;
}
.back .right-section {
padding: 0 40px;
}
#media all and (max-width: 698px) {
.flipbook-cont {
display: none;
}
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* {
box-sizing: border-box;
}

Try add in your css styles properties with -ms- prefix. For example:
.flip-container {
-ms-perspective:1200;
-ms-transition:all 0.6s;
}
.flip-container:hover .creation {
-ms-transform:rotateX(90deg);
}
.creation {
-ms-transform-style:preserve-3d;
-ms-transform-origin: 50% 0;
-ms-transition:all 0.6s;
}
.front {
-ms-backface-visibility:hidden;
}
.creation:after {
-ms-transform: rotateY( 180deg );
-ms-transform-style: preserve-3d;
-ms-backface-visibility: hidden;
}
You can check on caniuse.com to be sure what works in which browser.
Hope this help.