Skip to main content
.img-contenedor{position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}.img-contenedor:target{opacity:1;pointer-events: auto;}.img-contenedor > div{width: 90%;heigth: auto;position: relative;margin: 30% auto;padding: 0px;border-radius: 10px;background: #fff;background:-moz-linear-gradient(#fff, #999);background:-webkit-linear-gradient(#fff, #999);background:-o-linear-gradient(#fff, #999);-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;}.imagenropa a{width: 100%;position: relative;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px;}.close{background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right:-12px;text-align: center;top:-10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;}.close:hover{background: #00d9ff;}X

    .img-contenedor {   
            position: fixed;    
            font-family: Arial, Helvetica, sans-serif;  
            top: 0;     
            right: 0;   
            bottom: 0;  
            left: 0;    
            background: rgba(0,0,0,0.8);    
            z-index: 99999;     
            opacity:0;  
            -webkit-transition: opacity 400ms ease-in;  
            -moz-transition: opacity 400ms ease-in;     
            transition: opacity 400ms ease-in;  
            pointer-events: none; 
            } 
            
            .img-contenedor:target {    
            opacity:1;  
            pointer-events: auto; 
            } 
            
            .img-contenedor > div {     
            width: 90%; 
            heigth: auto;   
            position: relative;     
            margin: 30% auto;   
            padding: 0px;   
            border-radius: 10px;    
            background: #fff;   
            background: -moz-linear-gradient(#fff, #999);   
            background: -webkit-linear-gradient(#fff, #999);    
            background: -o-linear-gradient(#fff, #999); 
            -webkit-transition: opacity 400ms ease-in; 
            -moz-transition: opacity 400ms ease-in; 
            transition: opacity 400ms ease-in; 
            }
            .imagenropa a {
            width: 100%;
            position: relative;
            -webkit-border-radius: 9px;     
            -moz-border-radius: 9px;    
            border-radius: 9px;     
            }
            .close {    
            background: #606061;    
            color: #FFFFFF;     
            line-height: 25px;  
            position: absolute;     
            right: -12px;   
            text-align: center;     
            top: -10px;     
            width: 24px;    
            text-decoration: none;  
            font-weight: bold;  
            -webkit-border-radius: 15px;    
            -moz-border-radius: 15px;   
            border-radius: 15px;    
            -moz-box-shadow: 1px 1px 3px #000;  
            -webkit-box-shadow: 1px 1px 3px #000;   
            box-shadow: 1px 1px 3px #000; 
            } 
            
            .close:hover { 
            background: #00d9ff; }
<a href="#imgZoom">
            <img src="link de mi sexi botón">
            </a>
            <div id="imgZoom" class="img-contenedor">   
            <div>       
            <a href="#close" title="Close" class="close">X</a>      
            <div class="imagenropa"> 
            <a href="link que quiero quese abra pero no puedo porque tengo 8 dias apenas aprendiendo html"></a>
             </div>
            </div> </div>

.img-contenedor{position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}.img-contenedor:target{opacity:1;pointer-events: auto;}.img-contenedor > div{width: 90%;heigth: auto;position: relative;margin: 30% auto;padding: 0px;border-radius: 10px;background: #fff;background:-moz-linear-gradient(#fff, #999);background:-webkit-linear-gradient(#fff, #999);background:-o-linear-gradient(#fff, #999);-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;}.imagenropa a{width: 100%;position: relative;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px;}.close{background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right:-12px;text-align: center;top:-10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;}.close:hover{background: #00d9ff;}X

    .img-contenedor {   
            position: fixed;    
            font-family: Arial, Helvetica, sans-serif;  
            top: 0;     
            right: 0;   
            bottom: 0;  
            left: 0;    
            background: rgba(0,0,0,0.8);    
            z-index: 99999;     
            opacity:0;  
            -webkit-transition: opacity 400ms ease-in;  
            -moz-transition: opacity 400ms ease-in;     
            transition: opacity 400ms ease-in;  
            pointer-events: none; 
            } 
            
            .img-contenedor:target {    
            opacity:1;  
            pointer-events: auto; 
            } 
            
            .img-contenedor > div {     
            width: 90%; 
            heigth: auto;   
            position: relative;     
            margin: 30% auto;   
            padding: 0px;   
            border-radius: 10px;    
            background: #fff;   
            background: -moz-linear-gradient(#fff, #999);   
            background: -webkit-linear-gradient(#fff, #999);    
            background: -o-linear-gradient(#fff, #999); 
            -webkit-transition: opacity 400ms ease-in; 
            -moz-transition: opacity 400ms ease-in; 
            transition: opacity 400ms ease-in; 
            }
            .imagenropa a {
            width: 100%;
            position: relative;
            -webkit-border-radius: 9px;     
            -moz-border-radius: 9px;    
            border-radius: 9px;     
            }
            .close {    
            background: #606061;    
            color: #FFFFFF;     
            line-height: 25px;  
            position: absolute;     
            right: -12px;   
            text-align: center;     
            top: -10px;     
            width: 24px;    
            text-decoration: none;  
            font-weight: bold;  
            -webkit-border-radius: 15px;    
            -moz-border-radius: 15px;   
            border-radius: 15px;    
            -moz-box-shadow: 1px 1px 3px #000;  
            -webkit-box-shadow: 1px 1px 3px #000;   
            box-shadow: 1px 1px 3px #000; 
            } 
            
            .close:hover { 
            background: #00d9ff; }
<a href="#imgZoom">
            <img src="link de mi sexi botón">
            </a>
            <div id="imgZoom" class="img-contenedor">   
            <div>       
            <a href="#close" title="Close" class="close">X</a>      
            <div class="imagenropa"> 
            <a href="link que quiero quese abra pero no puedo porque tengo 8 dias apenas aprendiendo html"></a>
             </div>
            </div> </div>

Origen Enlace
Alst Adm
  • 51
  • 1
  • 2
  • 9

Abrir enlace en pop up

el problema es que tengo ese codigo y trabaja bien con etiquetas de imagen de parrafo y encabezado pero con enlace no me carga solo queda en vacio...

.img-contenedor { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .img-contenedor:target { opacity:1; pointer-events: auto; } .img-contenedor > div { width: 90%; heigth: auto; position: relative; margin: 30% auto; padding: 0px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .imagenropa a { width: 100%; position: relative; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } X