css3 - Overflow Hidden Not working correctly with radius border -


i trying create nice hover effect project working on , overflow hidden doesn't seem working in safari take look. learn.michaelscimeca.com

html:

<div class="thumnnail">   <img class="mainbg" src="img/shoppee.jpg" alt="">   <div class="textbox">     <img src="/img/eye.png" alt="">     <span class="launch"><a href="http://www.shoppedelee.com">view project</a></span>   </div> </div> 

css:

.thumnnail .textbox .launch {   margin-left: -78px;   text-align: center;   margin-top: 10px;   font-size: 12px;   font-weight: bold;   color: #ffffff;   padding: 15px 40px;   position: absolute;   top: 45px;   left: 50%;   background-color: #1c51c8;   border-radius: 100%;   text-transform: uppercase;   -ms-transition: .5s ease;   /* animation effect bring textbox down , down */    -webkit-transition: .5s ease;   -moz-transition: .5s ease;   -o-transition: .5s ease;   transition: .5s ease; } .thumnnail .textbox .launch a:hover {   background-color: #093db4; } .thumnnail:hover {   border: 10px solid #0d46c8;   /* alter border on rollover */    border-radius: 100%;   /* round out div tag */    /* rid of greyscale on rollover */    -webkit-filter: grayscale(0%);   -moz-filter: grayscale(0%);   -o-filter: grayscale(0%);   -ms-filter: grayscale(0%);   overflow: hidden! important; } .thumnnail:hover img {   /* width:120%;     height:120%;*/  } .thumnnail:hover .textbox {   height: 100px; } 

change transition from:

transition: .5s ease; 

to:

transition: border .5s ease; 

and post css , html other people can see problem was.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -