We Keep Coding

How to get an Arrow shape on the below provided JS filddle circular progress bar

I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks

You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/

CSS How to animate angled lines with skew transitions

I'm looking to incorporate a line that's being drawn that separates into 2 more spreading upwards and downwards by 45 degrees. This is CODEPEN.
CSS:
.connector {
height: 40px;
width: 200px;
border-bottom: 2px solid red;
border-right: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}

This would work:
.connector {
position: relative;
margin: 100px;
width: 100px;
height: 2px;
background: #f00;
}
.connector:before,
.connector:after {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 100px;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.connector:after {
transform: rotate(45deg);
}
<div class="connector"></div>
Here is an animated version:
.connector {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
animation: draw 1s linear;
animation-fill-mode: forwards;
}
.up,
.down {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 1s linear;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.down {
transform: rotate(45deg);
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div class="connector">
<div class="up"></div>
<div class="down"></div>
</div>

I don't know if I understood what you want. But, what about this?
https://codepen.io/pablodarde/pen/qPexVX
html
<div class="connector up"></div>
<div class="connector down"></div>
css
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
Here, my animated version...
HTML
<div class="container">
<div class="connector up"></div>
<div class="connector down"></div>
</div>
CSS
.container {
width: 0;
height: 80px;
overflow: hidden;
transition: all 2s ease;
}
.animate {
width: 220px;
}
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
box-sizing: border-box;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
JavaScript
document.querySelector('.container').classList.add('animate');
setTimeout(function() {
document.querySelector('.container').classList.add('animate');
}, 500);
.container {
width: 0;
height: 80px;
overflow: hidden;
transition: all 2s ease;
}
.animate {
width: 220px;
}
.connector {
height: 40px;
width: 200px;
border-right: 2px solid red;
box-sizing: border-box;
}
.up {
border-bottom: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
.down {
-moz-transform: skew(45deg);
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
<div class="container">
<div class="connector up"></div>
<div class="connector down"></div>
</div>

Using CSS and JQuery to animate a hexagon

I created a CSS hexagon using 3 divs and border colors and sizes. I would like to animate that hexagon by flipping it on it's x-axis and getting a new css hexagon like my code, below.
That all works in CSS. But then I want the new div to scale to 2x after the flip.
The CSS transform property does everything at once so I'm trying to scale after that using jQuery animate. If possible I would be open to doing everything in jQuery.
* {
box-sizing: border-box;
}
.hexagons {
width: 1100px;
letter-spacing: 0;
font-size: 0;
margin: 0 auto;
}
.hexagon-holder {
position: relative;
margin: 0 21.5px;
width: 226px;
height: 130.48px;
display: inline-block;
letter-spacing: 0;
font-size: 0;
}
.hexagon {
position: relative;
width: 226px;
height: 130.48px;
background-image: url(http://csshexagon.com/img/meow.jpg);
background-size: auto 258.6529px;
background-position: center;
border-left: solid 1px #333333;
border-right: solid 1px #333333;
display: inline-block;
z-index: 1;
}
.hexagon .hexTop,
.hexagon .hexBottom {
position: absolute;
z-index: 1;
width: 159.81px;
height: 159.81px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 32.10px;
-webkit-backface-visibility: hidden
}
/*counter transform the bg image on the caps*/
.hexagon .hexTop:after,
.hexagon .hexBottom:after {
content: "";
position: absolute;
width: 224.0000px;
height: 129.32646029847618px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexagon .hexTop {
top: -79.9031px;
border-top: solid 1.4142px #333333;
border-right: solid 1.4142px #333333;
}
.hexagon .hexTop:after {
background-position: center top;
}
.hexagon .hexBottom {
bottom: -79.9031px;
border-bottom: solid 1.4142px #333333;
border-left: solid 1.4142px #333333;
}
.hexagon .hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.5774px;
left: 0;
width: 224.0000px;
height: 129.3265px;
z-index: 2;
background: inherit;
}
.hexagon:nth-child(7n-2) {
margin-left: 156px;
}
.hexagon:nth-child(n+5) {
margin-top: 29px;
}
.hexText {
position: absolute;
left: 0;
top: 0;
z-index: 3;
color: #000;
opacity: 1;
font-size: 20px;
text-align: center;
width: 100%;
color: #fff;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
width: 226px;
height: 280.48px !important;
background: transparent;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 226px;
height: auto;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
top: 75px;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
.hexagon-overlay {
position: absolute;
width: 226px;
height: 130.48px;
margin: 0;
background-color: teal;
background-size: auto 247.1059px;
background-position: center;
border-left: solid 6px #333333;
border-right: solid 6px #333333;
opacity: .7;
z-index: 3;
top: 0;
left: 0;
}
.hexagon-overlay .hexTop,
.hexagon-overlay .hexBottom {
position: absolute;
z-index: 1;
width: 159.81px;
height: 159.81px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 27.10px;
}
/*counter transform the bg image on the caps*/
.hexagon-overlay .hexTop:after,
.hexagon-overlay .hexBottom:after {
content: "";
position: absolute;
width: 214.0000px;
height: 123.55295760657991px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexagon-overlay .hexTop {
top: -79.9031px;
border-top: solid 8.4853px #333333;
border-right: solid 8.4853px #333333;
}
.hexagon-overlay .hexTop:after {
background-position: center top;
}
.hexagon-overlay .hexBottom {
bottom: -79.9031px;
border-bottom: solid 8.4853px #333333;
border-left: solid 8.4853px #333333;
}
.hexagon-overlay .hexBottom:after {
background-position: center bottom;
}
.hexagon-overlay .hexagon:after {
content: "";
position: absolute;
top: 3.4641px;
left: 0;
width: 214.0000px;
height: 123.5530px;
z-index: 2;
background: inherit;
}
<div class="hexagons">
<div class="hexagon-holder flip-container" ontouchstart="this.classList.toggle('hover');">>
<div class="flipper">
<div class="front">
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
<div class="back">
<div class="hexagon-overlay">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
<div class="hexText">LifePoint Dental
<br />+</div>
<div class="hexagon" style="transform:scaleX(-1);">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
</div>
</div>
</div>
View on Codepen

How to prevent CSS for popup conflicting index.html CSS?

I'm attempting to use a form from codepen user Kyle Lavery sign up modal as a popup. I'm using <?php include"contact.html"; ?> in my index.html. My problem is that contact.html has overflow: hidden applied to the body which is conflicting with index.html. It's also possible that the styles applied to *, :before, :after are an issue but so far I can't tell. I tried putting a div around the entire form and it's parent divs and applying the styling from body to it but that cause the animation to shake slightly. Any suggestions on how to to apply this CSS while still keeping the animation smooth? My next thought is to use jQuery to only apply this CSS when the popup opens onclick. View the snippet full-screen to see the animation properly.
$(".close, .nope").on('click', function () {
$('.modal').addClass('hidden');
$('.open').addClass('active');
})
$(".open").on('click', function () {
$(this).removeClass('active');
$('.modal').removeClass('hidden');
})
*, :before, :after {
box-sizing: border-box;
margin: 0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body {
overflow: hidden;
}
.popup {
color: #FFF;
font-family: Roboto;
}
.modal {
height: 450px;
width: 650px;
margin: auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .4s, box-shadow .3s .4s;
transition: .4s, box-shadow .3s .4s;
}
.modal.hidden {
box-shadow: none;
-webkit-transition: .4s, box-shadow 0s;
transition: .4s, box-shadow 0s;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.modal.hidden .form {
top: 100%;
}
.modal.hidden .invite {
top: -100%;
}
.modal.hidden .invite .close {
height: 0;
width: 0;
top: 0;
right: 0;
}
.form, .invite {
background: rgba(71, 71, 71, 0.8);
width: 50%;
height: 100%;
padding: 25px;
position: absolute;
top: 0;
left: 0;
}
input {
background: rgba(255, 255, 255, 0.15);
width: 100%;
padding: 8px;
margin: 15px 0;
border: none;
border-radius: 3px;
outline: none;
color: #FFF;
font-size: 20px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 500px #7a7a7a inset;
-webkit-text-fill-color: #FFF;
}
label {
font: 500 14px Roboto;
color: #ffb66e;
}
button {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
padding: 10px 20px;
border: none;
border-radius: 21px;
outline: none;
overflow: hidden;
position: absolute;
bottom: 30px;
left: 50%;
color: #FFF;
font-size: 18px;
cursor: pointer;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
button:hover:before {
left: 110%;
-webkit-transition: .3s;
transition: .3s;
}
button:before {
content: '';
background: rgba(255, 255, 255, 0.3);
height: 100%;
width: 65px;
position: absolute;
top: 0;
left: -100%;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
-webkit-transition: 0s;
transition: 0s;
}
.invite {
background: -webkit-linear-gradient(135deg, #f04527, #ffb66e);
background: linear-gradient(-45deg, #f04527, #ffb66e);
left: 50%;
}
h2 {
font: 30px Roboto;
text-transform: uppercase;
}
.close {
background: #474747;
height: 30px;
width: 30px;
border: 3px solid #FFF;
border-radius: 50%;
position: absolute;
top: -15px;
right: -15px;
cursor: pointer;
-webkit-transition: .4s .3s;
transition: .4s .3s;
}
.close:before, .close:after {
content: '';
background: #FFF;
height: 80%;
width: 3px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.close:after {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.open {
color: black;
height: 45px;
width: 150px;
padding: 10px 20px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
}
.open.active {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Daily UI #001 - Sign Up Modal</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/contact.css">
</head>
<body>
<div class="popup">
<a class="open active" title="open modal" href="#">Open Modal</a>
<div class="modal hidden">
<div class="form">
<form>
<label for="first-name" required="required">First Name</label>
<input id="first-name" type="text" />
<label for="last-name" required="required">Last Name</label>
<input id="last-name" type="text" />
<label for="email" required="required">Email Address</label>
<input id="email" type="email" />
<label for="message">Message</label>
<input id="message" type="text" />
<button type="button">Send</button>
</form>
</div>
<div class="invite">
<h2>Thank you for your interest. I look forward to speaking with you soon.</h2>
<div title="close" class="close"></div>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/contact.js"></script>
</body>
</html>

jQuery display:none child div?

I have a 3D flip animation on an div container element. It works with a hover function.
This element have 2 main child containers : front and back.
Inside the front and back container there are a child div container where there are a picture.
<div class="element hover blog" id="_13" >
<div class="front shadow">
<div class="element-image-front"><div class="overlay"></div>
<img src="./Post thumbnail images/formlabs.jpg"/>
</div></div>
<div class="back">
<div class="element-image-back">
<img src="./Post thumbnail images/formlabs.jpg">
</div>
</div>
</div>
In my css the back container and back img container are display none.
I want to display block the back container and img container on hover fonction. And to display none when the mouse is not on hover.
I Have a problem to correctly write the code with $(this).
My script works fine, howerver I want to only display the back and the img back of the element hover.
Because I have many element on the same page
$(document).ready(function(){
$('.hover').hover(function(){
$(this).addClass('flip');
$('.element-image-back img').css('display', 'block');
$('.back').css('display', 'block');
},function(){
$(this).removeClass('flip');
$('.hover').$('.element-image-back img').css('display', 'none');
$('.hover').$('.back').css('display', 'none');
});
});
My css:
.element {
cursor: pointer;
width: 250px;
height: 180px;
margin: 3px;
float: left;
overflow: visible;
position: relative;
}
.element-image-front img{
position:absolute;
z-index: 3;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
outline: 1px solid rgba(0,0,0,0.1);
overflow:hidden;
}
.element-image-back img{
position: absolute;
display: none;
z-index: 4;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
opacity: 0.035;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.element .front {
position: absolute;
overflow: hidden;
z-index: 900;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #333;
text-align: center;
-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;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element.flip .front {
position: absolute;
z-index: 900;
width: 100%;
height: 100%;
background: #333;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.element .back {
position: absolute;
display: none;
overflow: hidden;
z-index: 800;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
background: #434343;
-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;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.element.flip .back {
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
background: #434343; /***#191919***/
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
box-shadow: inset 0px 0px 12px rgba(0,0,0,0.4), 0px 0px 8px rgba(0,0,0,0.7);
}
.click .front {
cursor: pointer;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
.click.flip .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
}
.click .back {
cursor: pointer;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
}
.click.flip .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
EDIT: here a fiddle with css :hover :
http://fiddle.jshell.net/9B5mS/
The is still a problem with the animation with css :hover ....

Your jquery chaining is wrong in $('.hover').$('.element-image-back img'):
Try to alter your code like this
$(document).ready(function () {
$('.hover').hover(function () {
$(this).addClass('flip');
$('.element-image-back img').css('display', 'block');
$('.back').css('display', 'block');
}, function () {
$(this).removeClass('flip');
$('.element-image-back img').css('display', 'none');
$('.back').css('display', 'none');
});
});