CODEWITHSUNDEEP
htmlimagecssborder
Voakie
Voakie

Reputation: 169

Fix images into a border (CSS)

//EDIT: Updated the Pen, so everybody can see the solution! Click here.

What i want is simple (in my opinion). I want to make an Image that when you hover your mouse above, will get zoomed in but won't get bigger. I tried this in a Pen, here is the link: Click here

Here the CSS i used for the Image:

.image {
  width: 100px;
  transition: all 0.5s;
}

.image:hover {
  width: 120px;
  transition: 0.5s;
}

(Only made the "get bigger" animation, due to the fact that i don't know how to do this "border" thing)

An example is the button, but he still grows a bit to the top, I guess that's the same issue i have with the image.

Upvotes: 1

Views: 415

Answers (3)

Timble
Timble

Reputation: 499

You're going to want to change your code a bit but it is possible. Check out this fiddle to see your example edited to work.

Basically you put the image in a div and set the image you want zoomed in as the background image, then zoom the background image on hover

div.horizontalboxes:hover { background-size: 200px 150%; }

Simple as that.

Hope you found this answer helpful, if you have any more questions feel free to leave a comment.

Upvotes: 2

Thomas Ghesquiere
Thomas Ghesquiere

Reputation: 502

Try with the css transform property

.image:hover {
    webkit-transform: scale(1.2);
    ms-transform: scale(1.2);
    transform: scale(1.2);
}

Upvotes: 1

Sruthi Suresh
Sruthi Suresh

Reputation: 697

check this fiddle..isthis what you need?

consider the following example

<div class="wrapper">
  <a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>  
<a href="javascript:void(0)">
  <img src="http://files.braadmartin.com/gretsch-catalina-club-in-natural.jpg" width="250" height="250" />
</a>
</div>

and the css

 .wrapper {
  width: 250px;
  height: 250px;
  text-align: center;
}

.wrapper img {
  margin: 4% 0;
  height: 92%;
  width: auto;
}

.wrapper img:hover {
  margin: 0;
  height: 100%;
}

here is the fiddle

https://jsfiddle.net/65bpLp9y/

Upvotes: 1

Related Questions