How to create an outline inside a Div?

I’m trying to re-create this photoshop design in Webflow. On hover, the div will change background from transparent to a semi-transparent color. The question is how do you recreate the outline inside the div block using webflow elements? Ideally, no images.

Add one more div inside and set border to it :wink:

2 Likes

Hey @MichealReno as @sabanna said you could add your content inside another div (maybe call it, outline div), then give that div a border. Then add padding to the parent div holding your content to create that look. :smiley:

Also be sure to try playing around with Box-Shadows, try using them without any blur (you can create some pretty neat effects with them)

1 Like

@Waldo @sabanna I thought about that solution too. The only problem is when you do this, there’s a slight delay when the second Div appears, because it’s padded inside the first one. This makes it weird. Also, you could put your mouse inside the first div, in the padded area, and only the background div will appear, and the forefront div wont, which makes it weird.

Ok, I got another solution:

  1. give that div a border( color of the line)
  2. set box shadow with the color of the div background, blur=0, distance=0, size=about 15-20px
  3. set the margin on all sides of that div equal the box-shadow size

Cheers,
Anna

1 Like

div inside of a div.

put some padding on the outer div

put a border on the inner div with a color.

Great solution! Thanks :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.