Kreis auf das Bild schweben EFFEKT

ich ein Bild haben wollen, die wie folgt aussehen (Hintergrund sollte weiß sein - nicht transparent wie in meinem Bild):Kreis auf das Bild schweben EFFEKT

Und wenn ich mit der Maus schweben auf dass Bild, Kreis sollte vollständig erweitern und meine Originalbild zeigen, die wie folgt aussehen:

um das zu tun, dass ich so etwas wie dies versuchen:

#myimage{ 
 
    background-color: #679b08; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    border-radius: 30px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
    font-family: Verdana; 
 
    
 
    animation: expand-in .5s ease-out; 
 
    animation-delay: 0s; 
 
    animation-fill-mode: backwards; 
 
    } 
 
    #myimage:hover{ 
 
    animation: expand-out .5s ease-out; 
 
    animation-delay: 0s; 
 
    animation-fill-mode: forwards; 
 
    } 
 
    
 
    @keyframes expand-in{ 
 
    0%{ 
 
     width: 300px; 
 
     height: 100px; 
 
     border-radius: 5px; 
 
    } 
 
    
 
    100%{ 
 
     width: 120px; 
 
     height: 120px; 
 
     border-radius: 60px; 
 
    } 
 
    } 
 
    @keyframes expand-out{ 
 
    0%{ 
 
     width: 120px; 
 
     height: 120px; 
 
     border-radius: 60px; 
 
    } 
 
    
 
    100%{ 
 
     width: 600px; 
 
     height: 200px; 
 
     border-radius: 5px; 
 
    } 
 
    }

<div id ="myimage"> 
 
<img width="600" height="445" src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png"> 
 
</div>

Hier ist auch der jsfiddle Link: https://jsfiddle.net/bq89efr8/

Problem ist, dass mein Kreis hinter Bild und es wird nicht richtig Zentrum und mein Bild zeigen, ich möchte dies funktioniert nur auf CSS und HTML (obwohl ich nichts dagegen habe, einige jquery zu verwenden) wenn möglich!

Quelle

2017-12-20 Tatu Bogdan

Warum Animationen hinzufügen? Sie können dies mit dem Attribut CSS transition auf dem Bild in Ihrem #myimage div. Tun.

#myimage{ 
 
    background-color: #fff; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    border-radius: 30px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
    font-family: Verdana; 
 
    } 
 
    #myimage img { 
 
    transition: all .3s ease-in-out; 
 
    border-radius: 100%; 
 
    } 
 
    #myimage img:hover { 
 
    border-radius: 0%; 
 
    }

<div id ="myimage"> 
 
<img width="600" height="445" src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png"> 
 
</div>

Quelle

2017-12-20 10:31:03 Damian

Kannst du dies zu einem Stapelüberlauf-Snippet verschieben? (anstatt externe Seite) –

@ Freedomn-m sicher, fertig! – Damian

Dies ist die beste und einfachste Lösung, vielen Dank! –

Verwenden Sie border-radius und: hover, um das gewünschte Ergebnis zu erhalten.

img{ 
 
border-radius: 50%; 
 
transition-duration: 0.25s; 
 
} 
 

 
img:hover{ 
 
border-radius: 0%; 
 
}

<img src="https://placeimg.com/64/64/animals?t=1513765419166"/>

bearbeiten Added transition-duration: 0.25s; den gewünschten Animationseffekt

Quelle

2017-12-20 10:25:15 Granny

Added Übergangsdauer: 0,25 s; um den gewünschten Animationseffekt hinzuzufügen –

Here ist eine Lösung (mit Übergängen).

img { 
 
    border-radius: 50%; 
 
    transition: border-radius 1s; 
 
} 
 
img:hover { 
 
    border-radius: 0; 
 
}

<img src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png" width="600" height="445">

Quelle

2017-12-20 10:32:00

Eine andere mögliche Lösung wäre onmouseover und onmouseout Eigenschaften zu verwenden.

Grundsätzlich lösen Sie das Ereignis aus, wenn Sie mit der Maus auf das Bild oder außerhalb des Bildes zeigen. Sie können damit den Umrandungsradius des Bildes ändern.

function normalImage(image){ 
 
    image.style.borderRadius = "0%"; 
 
    } 
 
    
 
    function roundedImage(image){ 
 
    image.style.borderRadius = "50%"; 
 
    }

img{ 
 
     border-radius: 50%; 
 
    }

<img onmouseover="normalImage(this)" onmouseout="roundedImage(this)" width="600" height="445" src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png">

Quelle

2017-12-20 10:40:25 Dino

Sie CSS verwenden können. Es enthält Browserkompatibles Webkit.

img{ 
    border-radius: 50%; 
    transition-duration: 0.25s; 
    -webkit-transition-duration: 0.25s;; 
    -moz-transition-duration: 0.25s;; 
    -ms-transition-duration: 0.25s;; 
} 

img:hover{ 
border-radius: 0%; 
}

Quelle

2017-12-20 10:44:20

können Sie ein Pseudoelement verwenden und das Bild als Hintergrund, so dass Sie das Bild mit Animation vermeiden Stretching und man kann leicht die Position des Kreises steuern, indem Sie oben Einstellen/rechts/unten/links Werte.

#myimage { 
 
    background-color: #679b08; 
 
    position: relative; 
 
    height: 445px; 
 
    width: 600px; 
 
    margin: auto; 
 
} 
 

 
#myimage:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50px; 
 
    bottom: 50px; 
 
    right: 120px; 
 
    left: 120px; 
 
    border-radius: 50%; 
 
    background-image: url(http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png); 
 
    background-size: auto; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    transition: 0.5s; 
 
} 
 

 
#myimage:hover::before { 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    border-radius: 0; 
 
}

<div id="myimage"> 
 
</div>

Quelle

2017-12-20 10:45:11

Sie auch folgende

#myimage { 
background-color: #679b08; 
display: table-cell; 
vertical-align: middle; 
width: 320px; 
height: 320px; 
text-align: center; 
border-radius: 300px; 
color: #fff; 
text-transform: uppercase; 
font-size: 24px; 
font-family: Verdana; 
animation: expand-in .5s ease-in; 
animation-delay: 0s; 
background-image: url('http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png'); 
background-size: cover; 
} 

#myimage:hover { 
animation: expand-out .5s ease-out; 
animation-delay: 0s; 
animation-fill-mode: forwards; 
} 

@keyframes expand-in { 
0% { 
    width: 600px; 
    height: 500px; 
    border-radius: 5px; 
} 
100% { 
    width: 320px; 
    height: 320px; 
    border-radius: 300px; 
} 
} 

@keyframes expand-out { 
0% { 
    width: 320px; 
    height: 320px; 
    border-radius: 300px; 
} 
100% { 
    width: 600px; 
    height: 500px; 
    border-radius: 5px; 
} 
}

Dann wird Ihr HTML ändern

<div id ="myimage"> 
    </div>

Quelle

2017-12-20 10:46:08 Xoog

Vielleicht habe ich nicht verstanden verwenden könnte ... Ich kann es thougth musste ein Kreis sein. (Vollbild es in Originalgröße zu sehen)

#myimage{ 
 
    background-color: #ffff; 
 
    text-align: center; 
 
    height:547px; 
 
    width:547px; 
 
    display:block; 
 
    margin:0 auto; 
 
    border-radius:50%; 
 
    overflow:hidden; 
 
    transition-duration: 0.25s; 
 
    } 
 
#myimage img{ 
 
    display:inline-block; 
 
    margin:0 auto; 
 
    height:100%; 
 
    width:auto; 
 
    position:relative; 
 
    left:-138px; 
 
    transition-duration: 0.25s; 
 
} 
 
#myimage:hover img{left:0;} 
 

 
#myimage:hover{ 
 
    width:823px; 
 
    border-radius:0; 
 
}

<div> 
 
<div id ="myimage"><img src="http://i.prntscr.com/cC-VFJNfRbqxjohddP9AGw.png"></div> 
 
</div>

Quelle

2017-12-20 11:04:25

Kreis auf das Bild schweben EFFEKT

Antwort

Verwandte Themen