Problema con Border-radius y img:hover

yiyomon · #1 (**permalink**) 18/03/2014, 19:52

Hola a todos. Soy nuevo en el foro lo encontre muy completo y es por eso que quicé preguntarles la siguiente duda.

Resulta que estoy empezando en el tema del css y todo el frontend y buscando encontre un menu circular que me llamo la atención. El tutorial no estaba claro asi que entendi la idea general y me dedique a experimentar hasta que obtuve el resultado, pero al agregar el efecto hover a las imagenes que pienso incorporar a otra página donde usare este menu me doy cuenta que el border radius se descontrola y deja de funcionar cuando se activa el hover de cualquier imagen en la página.

Este es el código.

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Codystar);
		*{
			padding:0px;
			margin:0px;
		}
		
		body{background:#000;}
		ul{
			list-style:none;
		}
		
		#posicionador{
			position:absolute;
			left:50%;
			bottom:0%;
		}
		#contenedor{
			position:absolute;
			height:140px;
			width:280px;
			left:-140px;
			bottom:0%;
			background:rgba(153,153,153,1);
			border-radius: 140px 140px 0px 0px;
			overflow:hidden;
		}
		
		#contenedor ul{
			position:absolute;
			bottom:0%;
			left:50%;
		}
		
		#contenedor li {
			display:block;
			background:white;
			width:150px;
			height:150px;
			-webkit-transform-origin:100% 100%;
			position:absolute;
			right:50%;
			bottom:50%;
			overflow:hidden;
		}
		#contenedor li a,#contenedor li #content{
			position:absolute;
			left:0;
			top:0;
			width:200px;
			height:200px;
			background:rgb(51,102,51);
		}
		
		#contenedor li #content{
			background:rgb(51,153,102) !important;
		}
		
		#contenedor a span.icon-left{
			display:block;
			width:100px;
			height:100px;
			margin:42px 57px 68px 53px;
			-webkit-transform-origin:100%,100%;
			background-image:url(ISA/recursos/flecha2.png);
			background-repeat:no-repeat;
			-webkit-transform:skew(-27deg,-3deg);
			opacity:0.5;
		}
		#contenedor a span.icon-right{
			display:block;
			width:100px;
			height:100px;
			margin:50px;
			-webkit-transform-origin:0%,100%;
			background-image:url(ISA/recursos/flecha.png);
			background-repeat:no-repeat;
			-webkit-transform: rotate(-90deg) skew(27deg,0deg) scale(1,0.9);
			opacity:0.5;
		}
		
		#contenedor a:hover span.icon-right,#contenedor a:hover span.icon-left{
			opacity:0.9;
		}
		
		#contenedor li:first-child{
			-webkit-transform:rotate(-30deg) skew(0deg,30deg);
		}
		
			#contenedor li:nth-of-type(2){
			-webkit-transform:rotate(30deg) skew(0deg,30deg);
		}
		
			#contenedor li:last-child{
			-webkit-transform:rotate(90deg) skew(0deg,30deg);
		}
	
	
		.text{
			display:block;
			width:100px;
			line-height:50px;
			margin:70px 40px 30px 60px;
			color:rgb(90,90,90);
			font-size:24px;
			font-weight:700;
			font-family:'Codystar', cursive;
			letter-spacing:4px;
			text-align:center;
			text-shadow:-1px 1px 2px #000;	
			/*ajuste de skew*/
			-webkit-transform: rotate(-50deg) skew(-10deg,1deg);
			-moz-transform: rotate(-50deg) skew(-10deg,1deg);
			-o-transform: rotate(-50deg) skew(-10deg,1deg);
			-ms-transform: rotate(-50deg) skew(-10deg,1deg);
		}
		
		img{
		-webkit-transition:-webkit-transform 0.3s ease-in;
		}
		img:hover{
			-webkit-transform:scale(1.3);
		}
	
	
	</style>
    <img src='ISA/imagenes isa/1.jpg'/>
	<div id='posicionador'>
	<div id='contenedor'>
    	<ul>
        	<li><a href='#'><span class='icon-left'></span></a></li>
            <li><div id='content'><span class='text'>1 | 2</span></div></li>
            <li><a href='#'><span class='icon-right'></span></a></li>
        </ul>
    </div>
    </div>
</body>
</html>

si alguien pudiera explicarme porque ocurre esto le estaré muy agradecido.

codeams · #2 (**permalink**) 22/03/2014, 22:25

¿A qué te refieres con "el border-radius se descontrola"?
Se tan gráfico como puedas en tu descripción. (una captura de pantalla no vendría nada mal)