Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Scott Allen
Scott Allen
487 Points

Attempting to add an outline to lower 50% of an image within a div, need advice or location of resources to help.

I have been trying to pull an image up 50% above div and keep an outline on the image but only within the lower 50% of the image. Any advice is appreciated, thank you!

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

I don't know a way to get a partial (or gradient) border, but you could simulate it using padding and a gradient background:

page.html 
<img class="lowborder" src="//placeimg.com/400/300/any">
styles.css 
.lowborder {
  padding: 20px;
  background: linear-gradient(180deg, transparent 0%, transparent 50%,
                                      red 50%,        red 100%);
}
Scott Allen
Scott Allen
487 Points

Steven Parker thank you! That did it, I have been attempting this for 2 days, I appreciate it!

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Update: I revised my answer when I realized that a wrapper isn't necessary, you can simply apply the background and padding directly to the image.

psycholinguist
seal-mask
.a{fill-rule:evenodd;}techdegree
psycholinguist
Front End Web Development Techdegree Student 4,751 Points
psycholinguist
.a{fill-rule:evenodd;}techdegree
psycholinguist
Front End Web Development Techdegree Student 4,751 Points

Are you looking for outline-offset property?

Scott Allen
Scott Allen
487 Points

Hi, thank you for commenting! I tried outline-offset but couldn't get it to work. I want the bottom of the image to have the outline and I would like the left and right sides of the images to have an outline 50% height of the total image. Please see the mockup I created here..https://drive.google.com/file/d/1X8wdvDZ5UWgR3GHyirJa1X1tgIDwGXHo/view?usp=sharing

The red outline within the gray div is how I am trying to structure it. I was thinking maybe using a parent and child div with for the image and separate background under the image?