图像上的圆圈悬停效果

Question

I want to have a picture that will look like this (background should be white - not transparent like in my pic):

And when I hover with the mouse on that picture, circle should fully expand and show my original picture that will look like this:

In order to do that I try something like this:

 #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> 

Here is also the jsfiddle link: https://jsfiddle.net/bq89efr8/

Problem is that my circle in behind picture and it won't properly center and show my picture, I would like to work this only on CSS and HTML (althou I don't mind using some jquery) if possible!

Answer 1

Why use animations? You can do this using the CSS transition attribute on the image inside your #myimage div.

 #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> 

Answer 2

You can use CSS. It includes browsercompatible 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%;
}

Answer 3

Use border-radius and :hover to get desired result.

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

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

Edit Added transition-duration: 0.25s; to add the desired animation effect

Answer 4

Another possible solution would be to use onmouseover and onmouseout properties.

Basically, you trigger the event when ever you point your mouse on the image, or outside the image. You can use that to change the border-radius of image.

  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"> 

Answer 5

Here is a solution (with transitions).

 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"> 

Answer 6

You could also use the following

#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;
}
}

Then change your HTML to

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

Answer 7

You can use a pseudo element and the image as background so you avoid stretching the image with animation and you can easily control the position of the circle by adjusting top/right/bottom/left values .

 #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> 

Answer 8

Maybe I didn't understood... I thougth it had to be a circle. (full screen to see it at real size)

 #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>