Immagine Css Al passaggio del raggio interno

Realizzo un'immagine che può essere spostata all'interno di un raggio di bordo al 100%.
E quando si passa su di esso l'immagine verrà ridimensionata. Ora arriva il problema. Quando lo alzo, vedrai l'immagine per 1 secondo al di fuori del raggio del bordo.Immagine Css Al passaggio del raggio interno

Sembra funzionare in Firefox. Ma non in chrome e Safari.

Demo Live:
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 */

Spero che qualcuno conosca il problema.

fonte

2013-07-04 Dennis Betman

Dare ''

uno stile di 'background-image: url (placehold.it/250x250); e quindi al passaggio del mouse cambia la proprietà 'background-size'. – Albzi

Il problema è che l'immagine deve essere all'interno dell'html. Perché lo sto facendo per qualcuno. E questo è il modo in cui lo vuole. Così può cambiare velocemente l'immagine. –

Può semplicemente modificare l'attributo dello sfondo con la stessa rapidità dell'attributo dell'immagine. – Albzi

Purtroppo si tratta di un bug su Chrome versione 27.0.1453.116 m Quale lo è descriverlo qui bug 62363

Essa si verifica quando si utilizza overflow:hidden in miscela con transform: scale(1.45)

Una soluzione , che funziona bene nell'aspetto progettuale è sufficiente rimuovere lo overflow:hidden sullo div.rounded-smallborder section. (solo un'opzione per risolvere il problema). Puoi dare un'occhiata all'anteprima qui. fiddle example

Spero che aiuti.

fonte

2013-07-04 08:45:18 wandarkaf

bello. "Questo sembra funzionare come previsto solo in IE9." rofl – abimelex

questa dose non risolve il problema ora tutte le immagini vanno al di fuori –

sembra essere un bug del motore. L'aggiunta del raggio del bordo anche al tag dell'immagine dovrebbe risolvere il problema.

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/

fonte

2013-07-04 07:34:34 abimelex

Grazie. Ma nel mio Chrome non funziona ancora. Quando lo alzo. Vedo l'immagine per almeno 1 sec fuori dal raggio del bordo. Ed è scomparire dopo 0,5 secondi. –

L'ho testato su Chromium e funziona perfettamente. Quale versione usi? My Specs: Version 28.0.1500.52 Costruito su Ubuntu 12.10, eseguito su LinuxMint 14 (28.0.1500.52-0ubuntu1.12.10.3) – abimelex

Sì, ho la versione 27.0.1453.116 e voi 28. Forse sarà questo il problema. –

ho modificato il codice di vedere i risultati here

si ERRORE cromato con scala e troppo pieno.

per il contenitore che hanno la (overflow: hidden) add (nel tuo caso la sua la div.rounded-smallborder section)

position:relative; 
z-index:1;

fonte

2016-02-07 09:49:14

Immagine Css Al passaggio del raggio interno

risposta

Problemi correlati