Search code examples
cssimage-resizing

Image resize onhover with css

I have a small issue with some code. I am trying to achieve the effect of image resizing done with css, in a small slider. The thing is that the image is only shown inside the frame it's into. How can i make it work to display the image in it's full size? The page i am trying to implement this is here, on the first slider. Thank you!

Solution 

  • img {
  position: absolute;
  transition: all 1s;
  width: 30vh;
  height: 30vh;
  margin: 5vh;
}

img:hover {
  width: 70vh;
  height: 70vh;
  margin: 15vh;
}
    <img src="http://2.bp.blogspot.com/-AXkkbmFRErs/TjCZIWGawfI/AAAAAAAAAlk/lT8yTGBYh38/s1600/Rick-Roll3.png">
<br><br><br><br><br><br><br><br><br><br>
Hover over me, please!

    Is this essentially what you are looking for?