I am missing something obvious. But the transition on only one element isn't working here.
Here's my code.
#navigatore-servizi ul li a {
color: #fff;
text-decoration: none;
text-shadow: 0 -1px 0 #008;
display:block;
width:240px;
height:96px;
background:#000;
background-position: top center;
line-height: 96px;
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
}
#navigatore-servizi ul li a:hover {
background-position: bottom center;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
border-right: 10px solid #b00;
}
You've got your
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
switched. I have to assume that's the problem.
Related
I have this piece of code:
<style>
.zoomimg img{
margin-top:2px;
margin-bottom:2px;
margin-right: 70px;
margin-left: 4px;
height:180px;
width:520px;
-moz-transition:-moz-transform 0.3s ease-in;
-webkit-transition:-webkit-transform 0.3s ease-in;
-o-transition:-o-transform 0.3s ease-in;
}
.zoomimg img:hover{
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
}
</style>
now what it does is great. but... when it enlarges , it enlarges the most right column and the picture in it.
resulting, the website gets wider...
but i don't want that.
how can i code it so the hover enlarge moves to the left. respectively and it doesn't enlarge the current browser page?
#container {
border: 2px solid red;
}
.zoomimg img {
margin-top: 2px;
margin-bottom: 2px;
margin-right: 70px;
margin-left: 4px;
height: 180px;
width: 520px;
overflow: hidden;
border: 2px solid black;
-moz-transition: -moz-transform 0.3s ease-in;
-webkit-transition: -webkit-transform 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.zoomimg img:hover {
opacity: 0.8;
filter: alpha(opacity=40);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
<div id="container">
<div class="zoomimg">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" />
</div>
</div>
I am brand new to coding.
I am trying to get text to appear when the user rolls over an image, like these images here: http://www.enthusiastic.co/
So far I have this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist img:hover {
opacity: .2;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 13px;
color: red;
}
#imagelist span:hover {
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
I know it has something to do with the span tag but I can't figure it out. Any help would be much appreciated. Thanks.
What you need is to set the :hover action to the a tag and also use absolute position for the span. Check this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
position:relative;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist a:hover img{
opacity: .7;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 23px;
color: red;
line-height:300px;
text-align:center;
position:absolute;
top:0;left:0;
width:100%;
}
#imagelist a:hover span{
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
Here's an easy code on bootply:
http://www.bootply.com/90238
It uses bootstraps native features along with this tiny bit of JS
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
I've been trying to mess around with my MAL CSS (myanimelist) to my liking. I've encountered this weird behavior in webkit browsers like chrome and opera where an extra space is left when I reposition a td element.
This is what I'm getting:
I made a jsfiddle for the project, where I basically copy pasted some html code from my anime list and slapped in my CSS code.
http://jsfiddle.net/qwwtt/1/
So what I exactly did was I removed a td element from where it's supposed to be, then repositioned it and added position:fixed and display:block so I could freely move it around. Now the thing is, it leaves a space on it's table location when viewed with Chrome or Opera. Here's the CSS code of the table rows and cells. (td:nth-of-type(6) is the one I repositioned)
tr [class^=td] {
background-color: rgba(64,64,64,0);
border-top: 1px solid rgba(255,255,255,0);
border-bottom: 1px solid rgba(255,255,255,0);
-webkit-transition: background-color 2s ease, border-color 1s ease;
-moz-transition: background-color 2s ease, border-color 1s ease;
-o-transition: background-color 2s ease, border-color 1s ease;
transition: background-color 2s ease, border-color 1s ease;
}
tr:hover [class^=td] {
background-color: rgba(255,255,255,0.25);
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.5);
-webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
-moz-transition: background-color 0.25s ease, border-color 0.25s ease;
-o-transition: background-color 0.25s ease, border-color 0.25s ease;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
tr td[class^=td] {
padding: 5px 0;
}
/**
*
* Per-column CSS
*
**/
tr td:nth-of-type(1)[class^=td], tr td:nth-of-type(1)[class=table_header] {
width: 4%;
min-width: 35px;
max-width: 100px;
text-align: right;
padding-right: 5px;
}
tr td:nth-of-type(2)[class^=td], tr td:nth-of-type(2)[class=table_header] {
min-width: 400px;
text-align: center;
}
tr td:nth-of-type(3)[class^=td], tr td:nth-of-type(3)[class=table_header],
tr td:nth-of-type(4)[class^=td], tr td:nth-of-type(4)[class=table_header],
tr td:nth-of-type(5)[class^=td], tr td:nth-of-type(5)[class=table_header],
tr td:nth-of-type(7)[class^=td], tr td:nth-of-type(7)[class=table_header],
tr td:nth-of-type(8)[class^=td], tr td:nth-of-type(8)[class=table_header],
tr td:nth-of-type(9)[class^=td], tr td:nth-of-type(9)[class=table_header],
tr td:nth-of-type(10)[class^=td], tr td:nth-of-type(10)[class=table_header] {
width: 8%;
min-width: 75px;
}
tr td:nth-of-type(6)[class^=td], tr td:nth-of-type(6)[class=table_header] {
-webkit-backface-visibility: hidden;
pointer-events: none;
position: fixed;
bottom: 10px;
left: 2%;
width: 40%;
opacity: 0;
-webkit-transform: translate(0px,50px);
-moz-transform: translate(0px,50px);
-ms-transform: translate(0px,50px);
transform: translate(0px,50px);
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
-o-transition: 1s ease-out;
transition: 1s ease-out;
padding: 5px 5px;
background-color: #000;
border: 2px solid rgba(255,255,255,0.75);
border-radius: 5px;
box-shadow: 0 0 5px rgba(255,255,255,0.5);
text-align: justify;
}
tr:hover td:nth-of-type(6)[class^=td] {
opacity: 1;
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
-moz-transition: 0.25s ease-out 0.25s;
-webkit-transition: 0.25s ease-out 0.25s;
-o-transition: 0.25s ease-out 0.25s;
transition: 0.25s ease-out 0.25s;
}
Please, how can I get an effect like the one in the upper right menu, with just CSS3? (mouse over -> circle shrinks and fades in, mouse out -> circle expands and fades out)
http://wpkuzen.com/html/architex/
I tried to look at the code and it's messy, nand couldn' find a tutorial that explain this...
Thanks in advance!
Take a look at this article and demo. They have very similar transitions/animations to the one which you need.
Here's an example:
FIDDLE
Markup:
CSS
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
This effect is done by using the CSS transition. You have one property and instead of change that property instantly (on hover or fadeout) you change that property over time.
Here you have a nice link helping you to hopefully achive your goals. :)
link to transition
I really don't understand your comment "I tried to look at the code and it's messy".
You have a fully indented CSS with comments !
directly copy-pasted from your link:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
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/