Amateur coder here. I am trying to make a responsive accordion for wordpress. I managed to get so far but I have no clue on how make the height of the accordion to auto fit the content.
https://jsfiddle.net/jahangeerm/hbbxgutx/8/
.accordion_mj {
width: auto;
}
.accordion_mj label {
padding: 20px 20px;
position: relative;
display: block;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 40px;
font-size: 19px;
background: #fff;
}
.accordion_mj label:hover {
background: #fff;
}
.accordion_mj input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion_mj input:checked + label,
.accordion_mj input:checked + label:hover {
background: #fff;
color: #fff;
}
.accordion_mj input {
display: none;
}
.accordion_mj .article {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion_mj .article p {
color: #777;
line-height: 23px;
font-size: 14px;
padding: 0px;
}
.accordion_mj input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion_mj input:checked ~ .article.ac-small {
height: 155px;
}
.accordion_mj input:checked ~ .article.ac-medium {
height: 400px;
}
.accordion_mj input:checked ~ .article.ac-large {
height: 600px;
}
Please help me tweak this to make it fit my content. Thank you.
Just let the height for this class auto, not 470px.
I think this will help you.
.accordion_mj input:checked ~ .article.ac-medium {
height: auto;
}
Related
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%;
}
Am trying to define css style in which when hover an element the opacity should change from 0 to 1.after a few seconds if unhover doesnt occur opacity should change its value to 0.
.selection:hover .player-icon {
opacity: 1;
transition-duration: 3s;
-moz-transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;*/
}
.player-icon {
margin-left: 45%;
margin-top: 21%;
z-index: 999;
position: absolute;
width: 55px;
height: 55px;
opacity: 0;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
Use keyframe animation.
#keyframes show-hide {
0% { color: red; }
10% { color: white; }
90% { color: white;}
100% { color: red; }
}
.player-icon {
display: inline-block;
padding: 1em;
color: red;
background-color: red;
}
.player-icon:hover {
animation: show-hide 3s linear;
}
Put your cursor on the red rectangle more than 3 seconds.<br><br>
<div class="player-icon">Play</div>
I am new to CSS. I have the following style for a tag button. How to reduce the height of the button? I tried changing it but it didn't help.
My code:
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 13px;
margin: 0;
height: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
Could anyone help me on this? Thanks.
Remove height completely and try adjusting line-height
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
margin: 0;
line-height: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
Reduce your height as well as padding and remove the line height.
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding:3px;
margin: 0;
height: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
You can adjust the line-height and height
CSS
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 0px;
margin: 0;
height: 22px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO HERE
Reduce the padding and line-height to decrease the height
Also read about the box model in css to understand more
https://css-tricks.com/the-css-box-model/
your .tag-btn is an inline-element,your can change the padding or line-height to change the height of btn,if your want to change the height directly, you can change the element to inline-block
.tag-btn {
padding: 5px 10px; //your code is 10px
}
Decrease "padding" css property. Make it one pixel and try.
padding: 1px;
your .tag-btn is an inline-element
your can change the padding
your can change the line-height
you can change the element to inline-block, if your want to change the height directly
every way will work for you
You need to remove line-height and padding from your CSS. Thereafter, you can manipulate the height.
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'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/