Position images inside a stylish border using CSS styling

Question

Position images inside a stylish border using CSS styling

//UPDATE: I've made some changes to the Pen, so now everyone can view the solution! Check it out here.

My goal is quite simple in my opinion. I want to create an image that zooms in when you hover over it but doesn't increase in size. I attempted this in a Pen, which you can find by clicking on this link: here

Below is the CSS code I used for the Image:

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

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

(I only implemented the enlargement animation, as I'm unsure how to achieve the "border" effect)

The button serves as an example, but it does expand slightly upwards. I suspect this is the same issue I'm encountering with the image.

html image css border

Answer 1

Answer №1

If you're looking to make some adjustments to your code, it's definitely possible. Take a look at this demo for an example of how you can edit your code to achieve the desired effect.

The basic idea is to place the image inside a div and set that image as the background image. Then, you can apply a zoom effect to the background image when hovering over the div.

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

It's really as simple as that!

I hope you found this solution helpful. If you have any more questions or need further clarification, please don't hesitate to leave a comment.

Answer 2

If you're looking to make some adjustments to your code, it's definitely possible. Take a look at this demo for an example of how you can edit your code to achieve the desired effect.

The basic idea is to place the image inside a div and set that image as the background image. Then, you can apply a zoom effect to the background image when hovering over the div.

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

It's really as simple as that!

I hope you found this solution helpful. If you have any more questions or need further clarification, please don't hesitate to leave a comment.

Answer 3

Answer №2

Have a look at this fiddle - does it meet your requirements?

Take a moment to review the example below:

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

Here is the CSS for styling:

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

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

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

To view the fiddle, click on the following link:

https://jsfiddle.net/65bpLp9y/

Answer 4

Have a look at this fiddle - does it meet your requirements?

Take a moment to review the example below:

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

Here is the CSS for styling:

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

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

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

To view the fiddle, click on the following link:

https://jsfiddle.net/65bpLp9y/

Answer 5

Answer №3

Experimentation with the css transform feature can yield some interesting results

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

Answer 6

Experimentation with the css transform feature can yield some interesting results

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

Position images inside a stylish border using CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Getting a jquery lightbox up and running

Styling a submission button with HTML and CSS

Struggling to align text on Bootstrap Card correctly

I need to access a webpage using VBA without relying on Internet Explorer for logging in

Is there a way to store a class property as a variable using PostCSS?

Display PHP Array data in a table on a webpage

arranging three divs in a row, with one div expanding to fill the entire height while the other two divs evenly split the remaining

Showcasing text behind an element with reduced opacity when the element directly above it is selected using rails, CSS, and jQuery

Text in gray overlaying image background

Is there a way to have a span update its color upon clicking a link?

Disabling collapse in Bootstrap 5 is impossible using stopPropagation() when clicking on a particular element

Is Html.Raw necessary for handling ragged html generated by Razor?

Is it possible to switch from a dropdown menu to radio buttons?

Tips for interpreting Json data received from a WCF service in HTML with the help of AJAX technology?

Having difficulty aligning ListItem to the right within a List

Image not showing up on HTML page following navigation integration

Troubles with CSS drop down alignment in Internet Explorer 7

Issues with LESS rendering on the Django production server

"Take a picture with the webcam" Once more

Steps for organizing a list based on the number of clicks