CODEWITHSUNDEEP
htmlcss
Tatu Bogdan
Tatu Bogdan

Reputation: 596

Circle on image hover efect

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

enter image description here

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

enter image description here

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!

Upvotes: 2

Views: 2131

Answers (8)

miguel-svq
miguel-svq

Reputation: 2176

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>

Upvotes: 1

Dino
Dino

Reputation: 8292

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

Upvotes: 2

Deepak Kumar
Deepak Kumar

Reputation: 355

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

Upvotes: 4

Xoog
Xoog

Reputation: 926

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>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272891

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>

Upvotes: 1

Cartman
Cartman

Reputation: 209

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>

Upvotes: 4

Miquel Al. Vicens
Miquel Al. Vicens

Reputation: 376

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

Upvotes: 2

Granny
Granny

Reputation: 783

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

Upvotes: 3

Related Questions