The following CSS works to animate a couple of listed items I have on this page:
https://startup.buscoajack.com/homepage-aurelie/
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
Unfortunately it doesn't appear on Safari :/. Could anybody indicate why this is happening and a possible solution? I'd really appreciate any help or hints!
Thanks,
Jack
I've also updated the CSS to not include "transition: all" as it appears to be an issue for Safari, but it doesn't seem to have fixed the issue:
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: 0.3s ease-in-out;
-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: 0.3s ease-in-out;
-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
Sorry, but don't have safari to check if it's work:
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: background-position 0.3s ease-in-out;
-transition: background-position 0.3s ease-in-out;
transition: background-position 0.3s ease-in-out;
-o-transition: background-position 0.3s ease-in-out;
-moz-transition: background-position 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: width 0.3s ease-in-out;
-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
Related
Just as a quick overview - I have purchased a theme for WordPress that has custom in-built animations for it's main menu (starts off large and transparent, and then on scroll, it becomes thinner with a solid colour background).
I've been trying for the past few days to simply set the scroll menu as the permanent menu and get rid of the animation, but I'm not having all that much luck with it, so any help would be really appreciated.
Css:
/* 2. Header
===============================================================*/
.wsmenucontainer header.topheader {
background: #222;
}
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.wsmenucontainer header.topheader .header-image {
background: #222;
height: 100%;
left: 0;
opacity: 1;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
header.topheader.scroll {
background: #222;
padding: 0;
}
header.topheader.scroll .header-image img {
opacity: 0;
}
.noHeadImage header.topheader {
padding: 1rem 0;
background:transparent;
}
.noHeadImage .header-image {
display:none;
}
.noHeadImage header.topheader.scroll {
background: #222;
padding: 0;
}
main section {
padding: 8rem 0;
}
main section#single-class{
padding: 0;
}
Jordy i help you, can you provide a Theme preview link?
You can either remove or comment transition css. Hope it gelps
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
//comment this area to remove transition
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */
}
.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
//comment this area to remove image transition
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */
}
To fix it, you can add a custom css in your theme (css custom area) or via plugin (https://it.wordpress.org/plugins/wp-add-custom-css/)
Your custom code:
.wsmenucontainer header.topheader{
transition: none; */
-moz-transition: none;
/* -webkit-transition: none; */
-o-transition: none;
}
I'm trying to make it zoom in from center rather than from top-left corner.
I've tried transform: scale(2,2), and transform: translateX(-25%) translateY(-25%), as per here, neither seem to do anything at all.
Is there any alternative to scale? It doesn't seem to be working in Chrome.
Maybe it has something to do with the container that it's in? I'm not sure. I tried changing the top and left coordinates to account for the movement of the center when the animation plays, but that also didn't help.
.box2 {
position: relative;
width: 40em;
height: 20em;
}
.box2 > .content {
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
opacity: 1.0;
margin: 0;
}
.box2.inactive > .content {
opacity: 0;
}
.circle {
position: absolute;
border-radius: 50%;
background: green;
opacity: 1;
}
.circle.circle1 {
top: 4em;
left: 6em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle.circle2 {
top: 10em;
left: 20em;
width: 3em;
height: 3em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html>
<div class="box2">
<div class="circle circle1"></div>
</div>
</html>
Looks like this in Microsoft Edge with scale(2,2) and doesn't animate at all in Chrome:
You can set transform: translate(-50%, -50%); for .circle - it shifts the circle left and up relatively to its starting point and thus the point set in the center of circle.
.circle {
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
background: green;
opacity: 1;
}
.circle.circle1 {
top: 8em;
left: 12em;
width: 5em;
height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.circle:hover {
width: 10em;
height: 10em;
}
<html><div class="circle circle1"></div></html>
I set the width of two separate divs (circle_bg_l and circle_bg_r) both to 7vh, however one of them appears to be bigger. Here is the code:
#charset "utf-8";
/* CSS Document */
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}
#headbar_left {
position: fixed;
left: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 100% -50%;
-o-transform-origin: 100% -50%;
-moz-transform-origin: 100% -50%;
-webkit-transform-origin: 100% -50%;
-ms-transform-origin: 100% -50%;
}
#headbar_right {
position: fixed;
right: 0;
margin: 0;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
}
#circle_bg_l {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
left: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
#circle_bg_r {
position: fixed;
z-index: 0;
width: 7vh;
height: 10vh;
right: calc(50vw - 7vh);
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
background-color: Transparent;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
.show {
background-color: #8704ff !important;
}
#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
background-image: url(html-logo.png);
background-size: 100%;
}
.l_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: left;
}
.l_menu:hover {
color: #161616;
background-color: #8704ff;
}
.r_menu {
height: 10vh;
z-index: 2;
line-height: 10vh;
vertical-align: center;
text-align: center;
color: white;
font-family: "Impact";
font-size: 2.5vh;
transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
width: calc((50vw - 7vh) / 3);
float: right;
}
.r_menu:hover {
color: #161616;
background-color: #8704ff;
}
.spin {
transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.collapse {
transform: scaleX(0);
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
}
.move_left {
transform: translateX(calc(7vh - 50vw));
-o-transform: translateX(calc(7vh - 50vw));
-moz-transform: translateX(calc(7vh - 50vw));
-webkit-transform: translateX(calc(7vh - 50vw));
-ms-transform: translateX(calc(7vh - 50vw));
}
.move_fast {
transition: all 0.2s ease-in-out !important;
-o-transition: all 0.2s ease-in-out !important;
-moz-transition: all 0.2s ease-in-out !important;
-webkit-transition: all 0.2s ease-in-out !important;
-ms-transition: all 0.2s ease-in-out !important;
}
#circle_logo:hover {
transition: all 0.15s ease-in-out !important;
-o-transition: all 0.15s ease-in-out !important;
-moz-transition: all 0.15s ease-in-out !important;
-webkit-transition: all 0.15s ease-in-out !important;
-ms-transition: all 0.15s ease-in-out !important;
border-radius: 0;
}
#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Impact";
font-size: 10vh;
padding-top: 21vh;
}
#t_s {
font-size: 2vh;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left">
<div class="l_menu">FIRST</div>
<div class="l_menu">SECOND</div>
<div id="l_mid" class="l_menu">THIRD</div>
</div>
<div id="headbar_right">
<div class="r_menu">SIXTH</div>
<div class="r_menu">FIFTH</div>
<div id="r_mid" class="r_menu">FOURTH</div>
</div>
<div id="circle_bg_l"></div><div id="circle_logo"></div><div id="circle_bg_r"></div>
<div id="body_content"><center>WHAT IS THIS PAGE?<p id="t_s">no one knows</center></div>
</body>
<script>
var a = 1;
function remove() {
if (a === 0) {
$("#circle_logo").removeClass('move_left');
setTimeout(function() {
$("#circle_logo").removeClass('move_fast');
$("#circle_logo").removeClass('spin');
$("#headbar_left, #headbar_right").removeClass('collapse');
$("#circle_logo").css("background-image", "url(html-logo.png)");
$("a").attr("href", "uh.html");
}, 300);
a = 1;
}
}
function add() {
if (a === 1) {
$("#circle_logo").addClass('spin');
$("#headbar_left, #headbar_right").addClass('collapse');
setTimeout(function() {
$("#circle_logo").addClass('move_left');
$("#circle_logo").addClass('move_fast');
$("#circle_logo").css("background-image", "url(up-arrow.png)");
$("a").attr("href", "#top");
}, 400);
a = 0;
}
}
$(document).scroll(function() {
if($(window).scrollTop() > 0) {
add();
}
else {
remove();
}
});
$("#l_mid").mouseover(function() {
$("#circle_bg_l").addClass("show");
});
$("#l_mid").mouseout(function() {
$("#circle_bg_l").removeClass("show");
});
$("#r_mid").mouseover(function() {
$("#circle_bg_r").addClass("show");
});
$("#r_mid").mouseout(function() {
$("#circle_bg_r").removeClass("show");
});
</script>
</html>
I also just noticed after running the snippet that the divs do not line up the same way they do when I open the webpage in a browser. Any idea how to fix these problems? Thanks!
They are the same size in firefox, chrome and safari (latest versions on OS X) - according to the snippet you posted. They also appear to my eyes the same size.
That said, your browser or device might be showing some differences, one possibility is your use of VW. You have 2 header portions, each using 51VW next to each other. That's roughly the equivalent of having 2 sections use 51% of the width, and not add to 100vw.
I would try changing those to 50VW each and test again.
I was playing with image swap hover effect with CSS3 transitions. Unfortunately, it only works in Chrome. I have seen lots of examples from CSS3 transition that works flawless in Chrome, Firefox and Safari, but not this time... :(
Where is the problem?
http://jsfiddle.net/kYZ9Y/
.logo {
float: left;
z-index: 1;
width: 325px;
height: 73px;
background: url(../img/logo.png) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(../img/logo1.png) no-repeat;
}
Cheers!
just change the ease to ease-in-out like this
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
demo: http://jsfiddle.net/kYZ9Y/4/
for more Easing Functions go to http://easings.net/
the markup :
<div class="logo"></div>
the style :
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.logo:hover {
z-index: 2;
opacity: 1;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
}
Can be done with pseudo elements.
.logo {
background: url(http://via.placeholder.com/300?text=Normal) no-repeat;
width: 300px;
height: 300px;
position: relative;
}
.logo:after {
content: "";
opacity: 0;
display:block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(http://via.placeholder.com/300?text=Hover) no-repeat;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logo:hover:after {
opacity: 1;
}
https://jsfiddle.net/84bvybjs/
At least for Firefox, as per the documentation, background-image is not animatable.
Instead, try putting both images one on top of each other and animating the opacity property:
.logo {
float: left;
z-index: 1;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/2.jpg) no-repeat;
position: absolute;
}
.logotop {
float: left;
z-index: 2;
width: 300px;
height: 225px;
background: url(http://pixellab-design.com/img/1.jpg) no-repeat;
position: absolute;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-ms-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.logotop:hover {
opacity: 0;
}
HTML:
<div class="logo"></div><div class="logotop"></div>
Fiddle: http://jsfiddle.net/kYZ9Y/2/
I'm making an image that can be hovered inside a border-radius with 100%.
And when you hover it the image will scale. Now comes the problem. When I hover it, you will see the image for 1 sec outside the border-radius.
It seems to be working in Firefox. But not in chrome and Safari.
Live Demo:
http://jewelbeast.com/something/imghover/rounded.html
HTML:
<div class="rounded-smallborder">
<section class="img-scale img-opacity" style="width: 250px; height: 250px;">
<img src="http://placehold.it/250x250" />
<div class="text">
<span>
<h1>This is a title</h1>
<ul>
<li>List number 1</li>
<li>List number 2</li>
<li>List number 3</li>
</ul>
</span>
</div>
</section>
</div>
CSS:
div.rounded-smallborder{
margin-top: 22px;
margin-bottom: 22px;
height: 362px;
width: 228px;
float: left;
display: block;
margin-left: 10px;
}
div.rounded-smallborder section{
position: relative;
width: 217px;
height: 217px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
border: 5px solid white;
-webkit-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
-moz-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
-ms-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
-o-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
float:left;
text-align: center;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
overflow: hidden;
background: #dfdfdf;
}
div.rounded-smallborder section img{
position: absolute;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
left: 0%;
}
div.rounded-smallborder section.img-slideleft:hover img{
margin-left: -35px;
}
div.rounded-smallborder section.img-zoomin:hover img{
width: 550px;
}
div.rounded-smallborder section.img-slideup:hover img{
margin-top: -35px;
}
div.rounded-smallborder section.img-opacity:hover img{
opacity: 0.2;
}
div.rounded-smallborder section.img-diagonal:hover img{
margin-top: -35px;
margin-left: -35px;
}
div.rounded-smallborder section.img-rotation:hover img{
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.img-scale:hover img{
-webkit-transform:scale(1.45);
-o-transform:scale(1.45);
-moz-transform:scale(1.45);
-ms-transform:scale(1.45);
transform:scale(1.45);
}
/* Text effecten */
div.rounded-smallborder section.txt-slideinleft .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:-250px;
}
div.rounded-smallborder section.txt-slideinleft:hover .text{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftTitle .text span h1{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:-250px;
}
div.rounded-smallborder section.txt-slideinleftTitle:hover .text span h1{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinright .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinright:hover .text{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinrightTitle .text span h1{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinrightTitle:hover .text span h1{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftRightAll .text span h1{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:-250px;
}
div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span h1{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftRightAll .text span p{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span p{
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinleftRightAll .text span a{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
div.rounded-smallborder section.txt-slideinleftRightAll:hover .text span a{
}
div.rounded-smallborder section.txt-opacityAll .text span h1{
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
transition-delay: 0s;
-webkit-transition-delay: 0s; /* Safari */
-moz-transition-delay: 0s; /* Safari */
-ms-transition-delay: 0s; /* Safari */
-o-transition-delay: 0s; /* Safari */
opacity: 0;
}
div.rounded-smallborder section.txt-opacityAll:hover .text span h1{
opacity: 1;
}
div.rounded-smallborder section.txt-opacityAll .text span p{
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
transition-delay: .5s;
-webkit-transition-delay: .5s; /* Safari */
-moz-transition-delay: .5s; /* Safari */
-ms-transition-delay: .5s; /* Safari */
-o-transition-delay: .5s; /* Safari */
opacity: 0;
}
div.rounded-smallborder section.txt-opacityAll:hover .text span p{
opacity: 1;
}
div.rounded-smallborder section.txt-opacityAll .text span a{
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-ms-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
transition-delay: 1s;
-webkit-transition-delay: 1s; /* Safari */
-moz-transition-delay: 1s; /* Safari */
-ms-transition-delay: 1s; /* Safari */
-o-transition-delay: 1s; /* Safari */
opacity: 0;
}
div.rounded-smallborder section.txt-opacityAll:hover .text span a{
opacity: 1;
}
div.rounded-smallborder section.txt-slideintop .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top:-450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideintop:hover .text{
margin-top: 0px;
}
div.rounded-smallborder section.txt-slideinbottom .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top:450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinbottom:hover .text{
margin-top: 0px;
}
div.rounded-smallborder section.txt-longopacity .text{
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
margin-left: -250px;
opacity: 0;
}
div.rounded-smallborder section.txt-longopacity:hover .text{
margin-left: 0px;
opacity: 1;
}
div.rounded-smallborder section.txt-slideinleftRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left: -250px;
}
div.rounded-smallborder section.txt-slideinleftRotation:hover .text{
margin-left: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.txt-slideinrightRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-left:250px;
}
div.rounded-smallborder section.txt-slideinrightRotation:hover .text{
margin-left: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.txt-slideintopRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top: -450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideintopRotation:hover .text{
margin-top: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
div.rounded-smallborder section.txt-slideinbottomRotation .text{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin-top: 450px;
margin-left: 0px;
}
div.rounded-smallborder section.txt-slideinbottomRotation:hover .text{
margin-top: 0px;
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
/* End of text effecten */
div.rounded-smallborder section .text{
position: absolute;
top: 0;
left: 0;
height: 100%;
width:100%;
display:table;
margin-left: -250px;
}
div.rounded-smallborder section:hover .text{
margin-left: 0px;
}
div.rounded-smallborder section span{
width: 200px;
display: table-cell;
vertical-align: middle;
padding: 20px;
color: black;
opacity: 0;
text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
}
div.rounded-smallborder section:hover span{
opacity: 1;
}
div.rounded-smallborder section:hover img{
opacity: 0.5;
}
div.rounded-smallborder section span h1{
width: 100%;
text-align: center;
font-size: 18px;
font-family: Verdana, sans-serif;
font-weight: bold;
line-height: 25px;
margin-bottom: 3px;
}
div.rounded-smallborder section span p{
width: 100%;
text-align: center;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
margin-bottom: 10px;
}
div.rounded-smallborder section span ul{
list-style-position:inside;
}
div.rounded-smallborder section span ul li{
width: 100%;
text-align: center;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
line-height: 15px;
}
div.rounded-smallborder section span a.button{
display: table;
margin: 0px auto;
text-align: center;
color: white;
text-shadow: none !important;
text-decoration: none;
font-size: 10px;
font-family: Verdana, sans-serif;
font-weight: bold;
padding: 9px 10px 11px 10px;
border: 1px solid #000000;
background: #494949; /* Old browsers */
background: -moz-linear-gradient(top, #494949 1%, #3a3a3a 94%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#494949), color-stop(94%,#3a3a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #494949 1%,#3a3a3a 94%); /* IE10+ */
background: linear-gradient(to bottom, #494949 1%,#3a3a3a 94%); /* W3C */
}
div.rounded-smallborder section span a.entire{
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
/* END */
I hope someone know the problem of it.
Sadly it's a bug on chrome Version 27.0.1453.116 m .Which is describe it here bug 62363
It occurs when you use overflow:hidden in mix with transform: scale(1.45)
A workaround, that works well in the design aspect is just remove the overflow:hidden on the div.rounded-smallborder section . (just an option to workaround the issue). You can take a look at the preview here. fiddle example
Hope it helps.
I edited your code see results here
it chrome BUG with scale and overflow .
for the container that have the ( overflow:hidden )
add ( in your case its the div.rounded-smallborder section )
position:relative;
z-index:1;
seems to be an engine bug.
Adding border-radius also to the image tag should solve the problem.
div.rounded-smallborder section img{
position: absolute;
border-radius: 100%; /*added line*/
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
left: 0%;
}
http://jsfiddle.net/5RA4m/