1

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.

image

happymacarts
  • 2,547
  • 1
  • 25
  • 33
Faheem Akram
  • 13
  • 4

3 Answers3

0

It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.

Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.

.wrapper {
  position: relative;
}

div {
  width: 100px;
  height: 100px;
  background: #000;
  border: 1px solid #FFF;
  position: absolute;
}

.first {
  left: 5px;
  top: 5px;
  z-index: -1;
  background-color: #777;
}

.second {
  left: 10px;
  top: 10px;
  z-index: -2;
  background-color: #AAA;
}
<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
  <div class="image"></div>
</div>
rastiq
  • 343
  • 1
  • 6
0

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>
mahdi gholami
  • 482
  • 1
  • 3
  • 13
0

try this

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}

.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;

width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}

.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;

width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>

<div class="imageContainer">

<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
mahesh perera
  • 51
  • 3