Resolved: HTML and CSS for gallery image border

Question:

I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically. Now I’m facing one issue i.e. How to add two borders like this using css or any other style-sheet.

Answer:

You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.

body{
background:#efefef;
}
.wrapper {
  position: relative;
  padding:10px;
}

.image {
  width: 100px;
  height: 100px;
  background: #000;
  border: 1px solid #FFF;
  position: absolute;
  box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}

<div class="wrapper">
  <div class="image"></div>
</div>

If you have better answer, please add a comment about this, thank you!

Resolved: HTML and CSS for gallery image border

Resolved: How to get Union type from an array of objects in Flow?

Resolved: Modify entity using Action in C#

Resolved: How to give rank on datetime column group by another column with userid in it

Leave A Reply