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"/>
Related
I have a few pages. On all menu pages the hamburger works correctly, except for the main page. On the main page, the hamburger menu does not open, although javascript is connected everywhere, I checked. Also, in the browser Firefox, the last is much lower than it should, although in other browsers everything is displayed correctly. What could be the mistake?
if ('ontouchstart' in window) {
var click = 'touchstart';
} else {
var click = 'click';
}
$('div.burger').on(click, function() {
if (!$(this).hasClass('open')) {
openMenu();
} else {
closeMenu();
}
});
$('div.menu ul li a').on(click, function(e) {
e.preventDefault();
closeMenu();
});
function openMenu() {
(document.getElementById("see").setAttribute("style", "display: block; z-index: 30;"));
$('div.burger').addClass('open');
$('div.x, div.z').addClass('collapse');
setTimeout(function() {
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function() {
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu() {
$('.menu li').removeClass('animate');
(document.getElementById("see").setAttribute("style", "display: none; z-index: 20;"));
setTimeout(function() {
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.menu-bg').removeClass('animate');
setTimeout(function() {
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function() {
$('div.y').show();
$('div.x, div.z').removeClass('collapse');
}, 70);
}, 100);
}
.container_header {
background: url(../img/img1.jpg) top center no-repeat;
position: relative;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
height: 960px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.container-header a {
float: left;
color: #000;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 10px;
}
.firstname {
font-size: 7.5rem;
color: #000;
position: absolute;
margin-top: 7%;
margin-left: 52%;
z-index: 1;
}
.firstname p {
margin-left: 50px;
}
.nav {
display: block;
}
.nav a {
position: fixed;
z-index: 10;
left: -278px;
transition: 0.3s;
width: 310px;
color: #000000;
border: 1px solid black;
margin-top: 27%;
padding: 15px;
font-size: 24px;
text-decoration: none;
line-height: 40px;
text-align: center;
}
#media screen and (max-width: 1024px) and (min-width: 381px) {
.parallax {
background-attachment: scroll;
}
.menu {
display: none;
background-image: url(../img/Фон.png);
height: 100%;
position: relative;
z-index: 20;
}
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
z-index: 30;
}
div.x,
div.y,
div.z {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
background: #000;
border-radius: 2px;
-webkit-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x,
div.y,
div.z {
height: 3px;
width: 26px;
}
div.y {
top: 18px;
}
div.z {
top: 37px;
}
div.collapse {
top: 20px;
-webkit-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.menu-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="container_header">
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">
<li class="home"><a class="icon home_bar" href="index.html"><span>Text</span></a></li>
<li class="gallery"><a class="icon gallery_bar" href="pages/gallery.html"><span>Text</span></a></li>
<li class="ut"><a class="icon ut_bar" href="pages/usefulTips.html"><span>Text</span></a></li>
<li class="contact"><a class="icon contact_bar" href="pages/contacts.html"><span>Text</span></a></li>
<li class="journal"><a class="icon journal_bar" href="#"><span>Text</span></a></li>
</ul>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</nav>
<div class="firstname">
<h1 class="name-main">Text
<p>Text</p>
</h1>
</div>
</header>
My tooltip is stuck in one place no matter which link I hover over and I dont know whats wrong. Is there a way I can adjust this code so that the tooltip appears over the link I hover over?
.tooltip {
display: inline;
position: relative;
z-index: 999;
}
.tooltip-content {
position: absolute;
background: url(../img/shape1.svg) no-repeat center bottom;
background-size: 100% 100%;
z-index: 9999;
padding-top: 0.95em;
height: 2em;
width: 5.5em;
bottom: 100%;
margin-left: -100px;
text-align: center;
color: #fff;
opacity: 0;
cursor: default;
font-size: 2.5em;
pointer-events: none;
font-family: 'Oduda-Bold-Demo';
-webkit-transform: scale3d(0.1,0.2,1);
transform: scale3d(0.1,0.2,1);
-webkit-transform-origin: 50% 120%;
transform-origin: 50% 120%;
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
-webkit-transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1);
transition-timing-function: ease, cubic-bezier(0.6,0,0.4,1);
}
.tooltip:hover .tooltip-content {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
/* Arrow */
.tooltip-content::after {
content: '';
position: absolute;
width: 64px;
height: 64px;
left: 50%;
margin-left: -8px;
top: 100%;
background: #00AEEF;
-webkit-transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg);
transform: translate3d(0,-60%,0) rotate3d(0,0,1,45deg);
}
Thanks for the help
I've implemented click event on .parent_2, but when I click on it, it does not work on iPAD.
Please help.
HTML:
<div class="parent_1">
<div class="parent_2">
<svg></svg>
</div>
</div>
CSS:
.parent_1 {
position: absolute;
top: 16px;
bottom: 0;
z-index: 3;
overflow: hidden;
width: 320px;
border-radius: 0 0 0 3px;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.parent_2 {
position: absolute;
top: 7px;
right: 7px;
z-index: 3;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
}
svg {
position: absolute;
top: 5px;
left: 5px;
display: block;
-webkit-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out;
pointer-events: none;
}
Hi everyone i have one problem with ajax hover. I am trying to make a userHoverCard like tumblr. But the hover animation not working when i use it with ajax.
This is working DEMO without ajax only css. In this demo you can see when you hover image then .p-tooltip will open with animation effect.
But if you click this DEMO from my test page then you can see when you hover an image then .p-tooltip will not open with animation effect.
HTML
<div class="p-tooltip"></div>
<div class="summary" data-id="25">
</div>
<div class="summary" data-id="20">
</div>
<div class="summary" data-id="25">
</div>
This is my ajax code:
$(document).ready(function() {
function showProfileTooltip(e, id){
e.append($('.p-tooltip').css({
'top':'20',
'left':'80'
}).show());
//send id & get info from get_profile.php
$.ajax({
url: 'get_profile.php?uid='+id,
beforeSend: function(){
$('.p-tooltip').html('Loading..');
},
success: function(html){
$('.p-tooltip').html(html);
}
});
}
function hideProfileTooltip(){
$('.p-tooltip').hide().fadeIn('fast');
}
$('.summary a').hover(function(e){
var id = $(this).attr('data-id');
showProfileTooltip($(this), id);
}, function(){
setTimeout(function(){
hideProfileTooltip();
},2000);
});
});
And here is CSS code:
.summary {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
}
.profile-ava {
width: 50px;
height: 50px;
background-image: url(http://gravatar.com/avatar/3913c4e14034c0a7f28db2c632290c21?s=80);
border-radius: 3px;
background-size: 50px 50px;
display: block;
}
.summary a:hover:before {
content: '';
position: absolute;
display: block;
bottom: -10px;
left: 0;
height: 10px;
width: 100%;
z-index: 2;
}
.p-tooltip {
position: absolute;
margin-top: 10px;
top: 100%;
left: 50%;
margin-left: -140px;
width: 280px;
max-height: 120px;
border-radius: 5px;
overflow: hidden;
background-color: #F0F0F0;
visibility: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.profile-header {
height: 120px;
background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
background-size: auto 120px;
background-position: 50%;
}
.profile-navigation {
position: absolute;
top: 0;
left: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.profile-nick {
color: #fff;
margin: 0;
padding: 0.4em 0;
font-size: 0.8em;
font-weight: bold;
}
.profile-action {
float: right;
background-color: #eee;
padding: 0.4em;
border-radius: 2px;
color: inherit;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
}
.p-tooltip .profile-ava {
margin: -40px auto 0;
width: 80px;
height: 80px;
background-size: 80px;
border: 3px solid #F0F0F0;
border-radius: 5px;
}
.profile-info {
text-align: center;
padding: 10px;
opacity: 0;
}
.profile-title {font-size: 1.6em; margin: 0;}
.profile-description {
margin: 0;
font-size: 0.8em;
}
.profile-items {margin: 0px; padding: 10px;}
.profile-items:after {
content: '';
display: table;
clear: both;
}
.profile-items li {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
float: left;
display: block;
border-radius: 3px;
}
.profile-items li:not(:first-child) {margin-left: 10px;}
.profile-items li:nth-child(1) {
background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}
.profile-header {
-webkit-transform: translate(0, -50px);
-moz-transform: translate(0, -50px);
transform: translate(0, -50px);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-info {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
-webkit-transform: scale(0.5) translate(0, -10px);
-moz-transform: scale(0.5) translate(0, -10px);
transform: scale(0.5) translate(0, -10px);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0;
}
.profile-items li {
-webkit-transform: translate(0, 50px);
-moz-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
opacity: 0;
}
.profile-items li:nth-child(2) {
-webkit-transition-delay: 0.35s;
-moz-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.summary:hover .p-tooltip {
visibility: visible;
opacity: 1;
max-height: 600px;
}
.summary:hover .profile-header,
.summary:hover .profile-info,
.summary:hover .p-tooltip .profile-ava,
.summary:hover .profile-items li {
-webkit-transform: translate(0,0) scale(1);
-moz-transform: translate(0,0) scale(1);
transform: translate(0,0) scale(1);
opacity: 1;
}
Anyone can help me please!
Essentially, I've created a pretty clever workaround. It is a mask that covers the image (invisible) until the html is loaded, then the hover css takes place after the z-index is lowered. The hover javascript is on the container.
FIDDLE
.summary {
margin: -50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 0;
}
.summary-mask {
margin: 50px auto 0;
width: 50px;
height: 50px;
position: relative;
z-index: 1;
}
.loaded .summary-mask {
z-index: -1;
}
HTML
<div class="the-container">
<div class="summary-mask"></div>
<div class="summary" data-id="100">
<div class="user-container"></div>
</div>
</div>
JS
var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> Follow <p class="profile-nick"> Page Name </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';
$(document).ready(function () {
function showProfileTooltip(e, id) {
//send id & get info from get_profile.php
$.ajax({
url: '/echo/html/',
data: {
html: response,
delay: 0
},
method: 'post',
success: function (returnHtml) {
e.find('.user-container').html(returnHtml).promise().done(function () {
$('.the-container').addClass('loaded');
});
}
});
}
function hideProfileTooltip() {
$('.the-container').removeClass('loaded');
}
$('.the-container').hover(function (e) {
var id = $(this).find('.summary').attr('data-id');
showProfileTooltip($(this), id);
}, function () {
hideProfileTooltip();
});
});
When you are showing the card, it only contains the loading message. When the content arrives and you put it in the card, that isn't a CSS change, so the transition isn't activated.
If you wait until the content has arrives to show the card, there is something to animate.
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');
});
});