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. [image] [image]

Ok, I got another solution: give that div a border( color of the line) set box shadow with the color of the div background, blur=0, distance=0, size=about 15-20px set the margin on all sides of that div equal the box-shadow size Cheers, Anna

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

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

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

[image] CSS Outline in the Designer Community resources Product feedback It’d be neat to have this: CSS Outline Properties in the Designer. Reading time: 1 mins 🕑 …

How to create an outline inside a Div?

Design help General

uzzer May 28, 2016, 5:05pm 8

Topic		Replies	Views
Half-size background-color on title General	3	2731	October 13, 2017
Random Border in Div Box With Background Color and Image Element General	2	1113	June 29, 2023
Double Shadow Help General	9	1863	May 24, 2016
How do I create multiple hover elements? General	13	9570	February 14, 2017
How to make transparent text with an outline? General	3	6524	May 22, 2018

How to create an outline inside a Div?

Related topics